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

Question

Im trying to figure out a way I can grab and attribute from a div and create a link within that same div including the attribute in the src

What I have so far just grabs the first Attribute so all links are the same.

Im very much a JS beginner so forgive me if the answer is obvious

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

First get all the spans with querySelectorAll. This returns a NodeList object. These objects have a forEach function to loop over the items inside of the object.

In the loop, each <span> is exposed. This means you can access properties of these elements and manipulate them. Since you're using data attributes I'd advice to use the dataset property, which holds the values of each data attribute.

Then instead of using innerHTML, use document.createElement to create a new <a> tag. This creates an anchor tag as an object. Here we can manually set the href property of the anchor based on the value of the dataset.

Then the append() method on the span to add the anchor as a child of the current span in the loop.

Note: _deal is not a valid value for the target attribute. See the list of possible values: 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>