published: 09 Oct 2022
2 min read
Insert an element before another DOM element with JavaScript
In vanilla 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>
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 <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.
ES6 before() Method
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, Safari, Firefox, and Opera, and doesn't work in Internet Explorer. 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
Are we missing something? Help us improve this article. Reach out to us.
Insert an element before another DOM element with JavaScript
In vanilla 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>
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 <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.
ES6 before() Method
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, Safari, Firefox, and Opera, and doesn't work in Internet Explorer. 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
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
