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

Question

我想找出一种方法，我可以从 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>

Answer 1

您似乎在寻找 forEach（遍历节点列表）：

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

});
)

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

首先得到所有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>

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

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

javascript

getelementsbyclassname

selectors-api

getattribute