Skip to main content Accessibility Feedback

Adding a new element to the DOM with vanilla JS

Yesterday, we looked at how to add markup to an element with vanilla JavaScript. As a follow-up, one of the students in my Vanilla JS Slack channel asked me how to inject a new element into the DOM with JavaScript.

We can do this using the createElement() method, which let’s us, as the name implies, create a new element. This is a fully manipulatable DOM node, and we can add classes and attributes to it. When we’re ready, we’ll use insertBefore() to inject it into the DOM.

Here’s what I mean…

// Get the element you want to add your new element before or after
var target = document.querySelector('#some-div');

// Create the new element
// This can be any valid HTML element: p, article, span, etc...
var div = document.createElement('div');

// Add content to the new element
div.innerHTML = 'Your content, markup, etc.';

// You could also add classes, IDs, and so on
// div is a fully manipulatable DOM Node

// Insert the element before our target element
target.parentNode.insertBefore( div, target );

// Insert the element after our target element
target.parentNode.insertBefore( div, target.nextSibling );

Even after added to the DOM, you can continue to use the div variable to manipulate the element.

Next, learn how to remove elements from the DOM with vanilla JS.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips