In JavaScript, you can use the 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> element:
<p id="intro">Hey, I am John!</p>
The goal is to add another <p> tag before the above element in the DOM. Here is an example that creates a new paragraph tag and then inserts it before the above <p> tag:
// 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)
The 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 insertAdjacentHTML() method.
Insert an element using before() method
The insertBefore() method adds 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 the new element as a parameter:
// insert the element before the target element
target.before(elem)
And that's it. The before() is only supported by the latest versions of Chrome, Safari, Firefox, and Opera. However, you can use a polyfill to extend the support up to IE 9 and higher.
Read Next: How to insert an element to the DOM in JavaScript
✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.
