JavaScript insert newly created element before another element

The other day we learned how to create a new element with JavaScript. And in this article, I’ll show you how you can insert it before another element.

As a recap, we can create an element using the createElement function.

Insert an element before another element

First, we have to make a sample element we can target in JavaScript.

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

Now we can select this element based on its ID.

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

And now, let’s create a paragraph element and add it before this one.

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

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

There is also the option to create these new elements on the fly, passing an element and text in one go.

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

You can view this code on Codepen.

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