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