CODEWITHSUNDEEP
javascripthtml
Ante
Ante

Reputation: 111

How to append each element from a loop to a newly created <a> tag, but in a way so that each element ends up in a separate anchor tag?

Ok, so I have this markup(current) and below that the desired markup(goal) that I would like to get.

It should be done via JavaScript, so no HTML editing.

Started with a "for loop" for singling out the individual card, created a tag that I need, and gave it a class, but I simply have no idea how to add each card to a separate anchor tag.

Is it also supposed to go through some loop or?

const programCards = document.querySelectorAll('.program-card'),
  aTag = document.createElement('a');
aTag.setAttribute('class', 'card-link');

for (let i = 0; i < programCards.length; i++) {
  const card = programCards[i];

  card.outerHTML = aTag;
}
<!-- Current -->
<div class="section-frame grid-container">
  <div class="program-card">
    <h4>title</h4>
    <img class="card-image" src="">
    <p>lorem dorem porem</p>
  </div>

  <div class="program-card">
    <h4>title</h4>
    <img class="card-image" src="">
    <p>lorem dorem porem</p>
  </div>
</div>

<!-- Goal -->
<div class="section-frame grid-container">
  <a class="card-link" href="#">
    <div class="program-card">
      <h4>title</h4>
      <img class="card-image" src="">
      <p>lorem dorem porem</p>
    </div>
  </a>

  <a class="card-link" href="#">
    <div class="program-card">
      <h4>title</h4>
      <img class="card-image" src="">
      <p>lorem dorem porem</p>
    </div>
  </a>
</div>

Upvotes: 1

Views: 555

Answers (1)

AndrewL64
AndrewL64

Reputation: 16311

Just loop through the programCards NodeList with the forEach method and append each card to the created aTag using the appendChild method after which you can then append the aTag to the parent div .section-frame.

const parentDiv = document.querySelector('.section-frame');
const programCards = document.querySelectorAll('.program-card');
programCards.forEach(card => {
  let aTag = document.createElement('a');
  aTag.setAttribute('class', 'card-link');
  aTag.appendChild(card);
  parentDiv.appendChild(aTag);
});
<div class="section-frame grid-container">
  <div class="program-card">
    <h4>title</h4>
    <img class="card-image" src="">
    <p>lorem dorem porem</p>
  </div>

  <div class="program-card">
    <h4>title</h4>
    <img class="card-image" src="">
    <p>lorem dorem porem</p>
  </div>
</div>

Upvotes: 1

Related Questions