Insert an element before another DOM element with JavaScript

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

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.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.