Subscribe

JavaScript insert newly created element after another element

✍️

How to add a new element after an existing element

13 Jun, 2021 · 1 min read

Yesterday we had a look at how you can insert an element before another element.

And today, we’ll be looking at the after function to insert elements after another element.

Insert an element after another element

Let’s start with an existing element with a unique ID.

<div id="existing">I'm an existing element</div>

Let’s select this element using its ID in JavaScript.

const el = document.getElementById('existing');

And now we can create a new element using the JavaScript createElement function.

const p = document.createElement('p');
p.textContent = `Hi I'm new here`;

// Insert before the after element
el.after(p);

And just like the before function, we can use a simple one-liner to change the text of this after insert.

// Insert element and text
el.after(span, "I'm a new span");

You can view this code on Codepen.

See the Pen JavaScript insert newly created element after another element by Chris Bongers 🤓💻⚡️ (@dailydevtips1) on CodePen.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 · 3 min read

10 games to learn JavaScript

Join 2099 devs and subscribe to my newsletter