Generating innerHTML and retrieving attributes simultaneously from a single Div element

Question

Generating innerHTML and retrieving attributes simultaneously from a single Div element

Looking for a way to extract an attribute from a div and use it to create a link within the same div with the attribute included in the src.

Currently, my code only picks up the first attribute, resulting in all links being the same.

I am still a beginner in JS, so please excuse me if the solution 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>

javascript getelementsbyclassname selectors-api getattribute

Answer 1

Answer №1

To start, retrieve all the spans using the querySelectorAll method. This will give you a NodeList object, which can be iterated over using the forEach function.

Within the loop, each <span> element is accessible. This allows you to manipulate the properties of these elements. Utilize the dataset property when working with data attributes, as it holds the values of each attribute.

Instead of using innerHTML, opt for document.createElement to create a new <a> tag. By creating an anchor tag as an object, you can manually set the href property of the anchor based on the dataset value.

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

Note: It is important to be aware that _deal is not a valid value for the target attribute. Refer to the list of acceptable values here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target

// Retrieve all spans with the data-cg-vin attribute.
const srpVin = document.querySelectorAll('span[data-cg-vin]');

// Iterate over each span.
srpVin.forEach(span => {
  // Obtain the value of the data-cg-vin attribute for the current span.
  const cgVin = span.dataset.cgVin;

  // Create a new <a> tag.
  const anchor = document.createElement('a');

  // 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}`;

  // Append 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

To start, retrieve all the spans using the querySelectorAll method. This will give you a NodeList object, which can be iterated over using the forEach function.

Within the loop, each <span> element is accessible. This allows you to manipulate the properties of these elements. Utilize the dataset property when working with data attributes, as it holds the values of each attribute.

Instead of using innerHTML, opt for document.createElement to create a new <a> tag. By creating an anchor tag as an object, you can manually set the href property of the anchor based on the dataset value.

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

Note: It is important to be aware that _deal is not a valid value for the target attribute. Refer to the list of acceptable values here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target

// Retrieve all spans with the data-cg-vin attribute.
const srpVin = document.querySelectorAll('span[data-cg-vin]');

// Iterate over each span.
srpVin.forEach(span => {
  // Obtain the value of the data-cg-vin attribute for the current span.
  const cgVin = span.dataset.cgVin;

  // Create a new <a> tag.
  const anchor = document.createElement('a');

  // 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}`;

  // Append 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 3

Answer №2

Utilize the forEach method to loop through each element.

var srpVsaBtn = Array.from(document.querySelectorAll('.carBannerWrapper'));

srpVsaBtn.forEach(btn => {
  const link = btn.querySelector('span').dataset.cgVin;
  btn.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 4

Utilize the forEach method to loop through each element.

var srpVsaBtn = Array.from(document.querySelectorAll('.carBannerWrapper'));

srpVsaBtn.forEach(btn => {
  const link = btn.querySelector('span').dataset.cgVin;
  btn.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 5

Answer №3

Are you in search of a solution involving forEach to loop through a nodelist? Check out the code snippet below:

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

Answer 6

Are you in search of a solution involving forEach to loop through a nodelist? Check out the code snippet below:

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

Generating innerHTML and retrieving attributes simultaneously from a single Div element

Answer №1

Answer №2

Answer №3

Similar questions

Alert! Server node encountered an issue while handling the response: process.nextTick(function(){throw err;});

Seeking the perfect message to display upon clicking an object with Protractor

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

Tips on how to bring in .js that has brought in .json from an html file

Is dynamic data supported by Next.js SSG?

Learn the steps to retrieve a user's profile picture using the Microsoft Graph API and showcase it in a React application

Browser freezes unexpectedly every 10-15 minutes

encountering a problem with retrieving the result of a DOM display

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

I struggle with generating a transition effect in the input box through label transformation

What is the best way to ensure a jQuery function runs on duplicated elements?

Unable to retrieve Java variable in JavaScript

React is giving me trouble as I try to map my tables. I am struggling to figure out how to do this

Getting the id of a row from a v-data-table in VueJs

Utilizing AngularJS to create an auto complete feature integrated with a SQL Server database

Display the input in the text box before making a selection from the dropdown menu

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

Disconnect occurred during execution of Node.js "hello world" on a Windows 7 operating system

Using Node JS as both an HTTP server and a TCP socket client simultaneously

Issue encountered while attempting to send a direct message to a user that has been mentioned