# JavaScript insert newly created element before another element

The other day we learned [how to create a new element with JavaScript](https://daily-dev-tips.com/posts/javascript-creating-a-new-element/).
And in this article, I'll show you how you can insert it before another element.

As a recap, we can create an element using the `createElement` function.

## Insert an element before another element

First, we have to make a sample element we can target in JavaScript.

```html
<div id="existing">I'm an existing element</div>
```

Now we can select this element based on its ID.

```js
const el = document.getElementById('existing');
```

And now, let's create a paragraph element and add it before this one.

```js
const p = document.createElement('p');
p.textContent = `Hi I'm new here`;

// Insert before the existing element
el.before(p);
```

There is also the option to create these new elements on the fly, passing an element and text in one go.

```js
// Insert element and text
el.before(span, "I'm a new span");
```

You can view this code on Codepen.

%[https://codepen.io/dailydevtips1/pen/KKWeEZN]

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)