How to add an element after an element in modern vanilla JavaScript?

[bendqh1]

I am trying to add an a link after each h2 heading.

I have tried these codes which didn’t work (no link appears after each h2):

const aTag = document.createElement('a');
aTag.innerHTML="I am a link";
aTag.href="https://example.com/node/1/edit";

const allH2s = document.querySelectorAll('h2').forEach( (heading)=>{
    heading.after(aTag);
});

Changing heading.after(aTag) to heading.appendChild(aTag); also doesn’t work.

[DaveMaxwell]

You must have something else going on because it works just fine in codepen. Check your tools and see if an error is getting thrown above this line of code.

[bendqh1]

@bendqh1

const aTag = document.createElement('a');
aTag.innerHTML="I am a link";
aTag.href="https://example.com/node/1/edit";

const allH2s = document.querySelectorAll('h2').forEach( (heading)=>{
    heading.after(aTag);
});

Hi Dave !

In this webpage it doesn’t work:

https://benaharoni.com/content-writing

I checked the DOM as well and found nothing added to DOM right after the h2 headings.

[DaveMaxwell]

I don’t see that javascript anywhere if I use inspect element

[Thallius]

I am pretty sure you do not upload your changes to the right website

[bendqh1]

Sorry, I don’t understand. Will you rephrase that?

[bendqh1]

Hello Thallius

I don’t understand what you meant because in the tested website the original code doesn’t work.

Here is an image to further explain this situation.

[PaulOB]

Don’t you need to create an element for each one?

You only created one element.

e.g.

const aTag = [];

const allH2s = document.querySelectorAll("h2").forEach((heading, index) => {
  aTag[index] = document.createElement("a");
  aTag[index].innerHTML = "I am a link";
  aTag[index].href = "https://example.com/node/1/edit";
  heading.after(aTag[index]);
});

[DaveMaxwell]

@PaulOB

Don’t you need to create an element for each one?

Not if you’re creating the same link over and over again (like a top or something? dunno…)

[bendqh1]

Thanks a lot Paul. I understand that this is what I needed to do in the first place.

Probably the fact that I use a content management system with “hidden” or “elusive” management links didn’t let me see the change in any first “frontal” h2 heading.

I should read about the index keyword you used there.

Thanks again !

[PaulOB]

@DaveMaxwell

Not if you’re creating the same link over and over again

I think you have to clone it as the original element is removed each time and you would just get one element.

Here’s a simpler version using cloneNode().

const aTag = document.createElement("a");
aTag.innerHTML = "I am a link";
aTag.href = "https://example.com/node/1/edit";

const allH2s = document.querySelectorAll("h2").forEach((heading) => {
  heading.after(aTag.cloneNode(true));
});

[DaveMaxwell]

@PaulOB

I think you have to clone it as the original element is removed each time and you would just get one element.

That actually makes sense. It’s creating a single DOM object, hence why it can only be there once. Cloning it will create the copies needed.

[rpg_digital]

@PaulOB

I think you have to clone it as the original element is removed each time and you would just get one element.

@bendqh1, running your script if you check the last h2 on the page you will probably see your ‘I am a new link’

You are just shifting that node from after one h2 to the next. If that makes sense.

I took a longwinded approach, compared to Paul’s more elegant cloneNode.

const createLink = function() {
  const link = document.createElement('a');
  
  link.textContent = "I am a link";
  link.href = "https://example.com/node/1/edit";
  return link;
}

const allH2s = document.querySelectorAll('h2').forEach( (heading)=>{
  heading.after(createLink());
});