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.