Создание innerHTML в Div, а также атрибут getAttribute из того же div

#javascript #getelementsbyclassname #selectors-api #getattribute

Вопрос:

Я пытаюсь придумать, как я могу захватить и атрибутировать из div и создать ссылку в том же div, включая атрибут в src

То, что у меня есть до сих пор, просто захватывает первый атрибут, поэтому все ссылки одинаковы.

Я очень новичок в JS, так что простите меня, если ответ очевиден

 var srpVin = document.querySelectorAll('span[data-cg-vin]')[0].getAttribute("data-cg-vin");

 var srpVsaBtn = document.getElementsByClassName('carBannerWrapper');
for (var i = 0; i < srpVsaBtn.length; i  ) {
    srpVsaBtn[i].innerHTML  = '<a href="https://myurl.com/?vin=' srpVin 'amp;dealer_id=28987" target=_deal>Click here - ' srpVin '</a>';
}

 <div class="carBannerWrapper"><div><span data-cg-vin="1FMCU9G66MUA11123" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="MAJ3S2GE7LC386456" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="11FMCU9H67LUC59789" data-cg-price="34399"></span></div></div>

Ответ №1:

Сначала соберите все пролеты querySelectorAll . Это возвращает NodeList объект. У этих объектов есть forEach функция для перебора элементов внутри объекта.

В цикле каждый <span> из них подвергается воздействию. Это означает, что вы можете получить доступ к свойствам этих элементов и управлять ими. Поскольку вы используете атрибуты данных, я бы посоветовал использовать dataset свойство, которое содержит значения каждого атрибута данных.

Затем вместо использования innerHTML используйте document.createElement для создания нового <a> тега. Это создает тег привязки в качестве объекта. Здесь мы можем вручную задать href свойство привязки на основе значения набора данных.

Затем append() метод на промежутке, чтобы добавить привязку в качестве дочернего элемента текущего промежутка в цикле.

Примечание: _deal не является допустимым значением для target атрибута. Смотрите список возможных значений: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target

 // Collect all spans with the data-cg-vin attribute.
const srpVin = document.querySelectorAll('span[data-cg-vin]');

// Loop over each span.
srpVin.forEach(span => {
  // Get the data-cg-vin attribute value of the current span.
  const cgVin = span.dataset.cgVin;

  // Create a new <a> tag..
  const anchor = document.createElement('a');

  // ..and set the href, target and textContent based on the data attribute value. 
  anchor.href = `?vin=${cgVin}amp;dealer_id=28987`;
  anchor.target = '_blank';
  anchor.textContent = `Click here - ${cgVin}`;

  // Add the anchor to the span.
  span.append(anchor);
});

 <div class="carBannerWrapper"><div><span data-cg-vin="1FMCU9G66MUA11123" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="MAJ3S2GE7LC386456" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="11FMCU9H67LUC59789" data-cg-price="34399"></span></div></div>

Ответ №2:

Используйте forEach для перебора каждого элемента.

 var srpVsaBtn = Array.from(document.querySelectorAll('.carBannerWrapper'));

srpVsaBtn.forEach(button => {
  const link = button.querySelector('span').dataset.cgVin;
  button.innerHTML = '<a href="https://myurl.com/?vin=' link 'amp;dealer_id=28987" target=_deal>Click here - ' link '</a>';
})

 <div class="carBannerWrapper"><div><span data-cg-vin="1FMCU9G66MUA11123" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="MAJ3S2GE7LC386456" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="11FMCU9H67LUC59789" data-cg-price="34399"></span></div></div>

Ответ №3:

Похоже, вы ищете forEach (для перебора списка узлов):

 var srpVin = document.querySelectorAll('span[data-cg-vin]').forEach(function(elem,idx) {
  elem.getAttribute("data-cg-vin");

});
)