Injecting one element after another with vanilla JS
Yesterday, we learned how to inject one element before another with the Node.before() method. Today, we’re going to look at how to inject an element after another instead.
The Node.after() method works just like the Node.before() method, but injects your elements after the target element instead of before it.
Call the Node.after() method on the node you want to insert after, and pass in one or more new elements or strings as arguments.
<div id="app">Good morning</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 after the target node
// <div id="app">Good morning</div><p>Hello!</p>
app.after(p);
// You can inject more than one item by passing in multiple arguments
// <div id="app">Good morning</div><p>Hello!</p>What's poppin'
app.after(p, `What's poppin?`);