As a recap, we can create an element using the
Insert an element before another element permalink
<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
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.