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