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

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";

const allH2s = document.querySelectorAll('h2').forEach( (heading)=>{

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

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.

Hi Dave !

In this webpage it doesn’t work:

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

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

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

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

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.

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

You only created one element.


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 = "";
1 Like

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

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 !

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 = "";

const allH2s = document.querySelectorAll("h2").forEach((heading) => {

1 Like

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.

@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 = "";
  return link;

const allH2s = document.querySelectorAll('h2').forEach( (heading)=>{

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.