This content originally appeared on Go Make Things and was authored by Go Make Things
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?`);
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-03-18T14:30:00+00:00) Injecting one element after another with vanilla JS. Retrieved from https://www.scien.cx/2021/03/18/injecting-one-element-after-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.