在 Div 中创建 innerHTML 并从相同的 div 中创建 getAttribute

Creating innerHTML within a Div & also getAttribute from within that same div

我想找出一种方法,我可以从 div 中获取属性并在同一个 div 中创建一个 link,包括 src[=14= 中的属性]

到目前为止,我只获取了第一个属性,因此所有 link 都是相同的。

我是一个 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>

您似乎在寻找 forEach(遍历节点列表):

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

});
)

使用 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>

首先得到所有querySelectorAll的span。这个 returns 一个 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>