Injecting one element after another with vanilla JS

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?`);

Here’s a demo.

This content originally appeared on Go Make Things and was authored by Go Make Things

Print Share Comment Cite Upload Translate

APA

Go Make Things | Sciencx (2023-10-04T19:39:09+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/.

MLA

" » Injecting one element after another with vanilla JS." Go Make Things | Sciencx - Thursday March 18, 2021, https://www.scien.cx/2021/03/18/injecting-one-element-after-another-with-vanilla-js/

HARVARD

Go Make Things | Sciencx Thursday March 18, 2021 » Injecting one element after another with vanilla JS., viewed 2023-10-04T19:39:09+00:00,<https://www.scien.cx/2021/03/18/injecting-one-element-after-another-with-vanilla-js/>

VANCOUVER

Go Make Things | Sciencx - » Injecting one element after another with vanilla JS. [Internet]. [Accessed 2023-10-04T19:39:09+00:00]. Available from: https://www.scien.cx/2021/03/18/injecting-one-element-after-another-with-vanilla-js/

CHICAGO

" » Injecting one element after another with vanilla JS." Go Make Things | Sciencx - Accessed 2023-10-04T19:39:09+00:00. https://www.scien.cx/2021/03/18/injecting-one-element-after-another-with-vanilla-js/

IEEE

" » Injecting one element after another with vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/03/18/injecting-one-element-after-another-with-vanilla-js/. [Accessed: 2023-10-04T19:39:09+00:00]

rf:citation

» Injecting one element after another with vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2021/03/18/injecting-one-element-after-another-with-vanilla-js/ | 2023-10-04T19:39:09+00:00