在 div 中创建 innerHTML 并从同一个 div 中创建 getAttribute

Question

我试图找出一种方法，我可以从 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+'&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>

Answer 1

首先使用querySelectorAll 获取所有跨度。这将返回一个 NodeList 对象。这些对象有一个forEach 函数来遍历对象内部的项目。

在循环中，每个<span> 都会被暴露。这意味着您可以访问这些元素的属性并对其进行操作。由于您使用的是数据属性，我建议您使用 dataset 属性，该属性保存每个数据属性的值。

然后不使用innerHTML，而是使用document.createElement 创建一个新的<a> 标签。这将创建一个锚标记作为对象。这里我们可以根据数据集的值手动设置anchor的href属性。

然后在 span 上的 append() 方法将锚点添加为循环中当前 span 的子节点。

注意：_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}&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>

Answer 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+'&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>

Answer 3

您似乎正在寻找 forEach（迭代节点列表）：

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

});
)