insertBefore() method to insert an element before another HTML element in the DOM. This method adds an element, right before an existing element in the document.
Let us say we have the following existing
<p id="intro">Hey, I am John!</p>
Our goal is to add another
<p> tag right before the above element in the DOM. Here is an example that creates a new paragraph tag and then inserts it before the above
// create new element const elem = document.createElement('p'); // add text elem.innerText = 'Personal Details'; // grab target element reference const target = document.querySelector('#intro'); // insert the element before target element target.parentNode.insertBefore(elem, target);
insertBefore() method is supported by all modern and old browsers including Internet Explorer 6 and higher.
If you want to insert an HTML string before an element in the DOM, you should use the
insertAdjacentHTML() method instead. This method parses the specified string as HTML and inserts the resulting elements into the DOM tree at a specified position. Here is an example:
// insert HTML string before target element target.insertAdjacentHTML('beforebegin', '<p>Personal Details</p>');
Take a look at this MDN guide to learn more about the
insertBefore() method works great to add a new element before another element in the DOM. However, you need to call it on the
parentNode of the target element.
Fortunately, ES6 introduced a new method called
before() to insert an element before another DOM element. You call the
before() method on the target node directly, and pass in the new element as a parameter like below:
// insert the element before target element target.before(elem);
And that's it. The
before() is only supported by the latest versions of Chrome, Firefox, and Opera, and doesn't work in Safari and Internet Explorer. However, you can use a polyfill to extend the support up to IE 9 and higher.
👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, ☕ Buy me a coffee (cost $5).