# Insert an element before another DOM element with JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 11, 2020, updated Oct 15, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-insert-element-before

> Learn how to create and insert an element before another element in the DOM by using vanilla JavaScript.

In JavaScript, you can use the `insertBefore()` method to insert an element before another HTML element in the [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript). This method adds an element right before an existing element in the document.

Let us say we have the following existing `<p>` element:

```markup
<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:

```javascript
// 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:

```javascript
// insert HTML string before target element
target.insertAdjacentHTML('beforebegin', '<p>Personal Details</p>')
```

Take a look at [this MDN guide](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) 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:

```javascript
// 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](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before#polyfill) to extend the support up to IE 9 and higher.

**Read Next:** [How to insert an element to the DOM in JavaScript](https://attacomsian.com/blog/javascript-insert-element)