This content originally appeared on Go Make Things and was authored by Go Make Things
Yesterday, we looked at how to create an element using the document.createElement() method. Today, we’re going to learn how to inject one element before another in the DOM.
This is another short and sweet one.
You can use the Node.before() method to insert elements and strings before another element. Call the Node.before() method on the node you want to insert before, and pass in one or more new elements or strings as arguments.
<div id="app">Good evening</div>// Create a new element
let p = document.createElement('p');
p.textContent = 'Hello!';
// Get the target node
let app = document.querySelector('#app');
// Insert the new node before the target node
// <p>Hello!</p><div id="elem">Good evening</div>
app.before(p);
// You can inject more than one item by passing in multiple arguments
// <p>Hello!</p>What's poppin'<div id="elem">Good evening</div>
app.before(p, `What's poppin?`);
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-03-17T14:30:00+00:00) Injecting one element before another with vanilla js. Retrieved from https://www.scien.cx/2021/03/17/injecting-one-element-before-another-with-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.