This content originally appeared on Go Make Things and was authored by Go Make Things
Last week, we looked at how to create an element with vanilla JS, and how to add it before or after another element.
Today, I wanted to look at how we can add one or more elements to the end of a group of elements inside a parent.
The ParentNode.append() method
The ParentNode.append() method lets you insert one or more elements or strings at the end of a set elements inside a shared parent. Call the ParentNode.append() method on the target node, and pass in one or more new elements or strings as arguments.
For example, let’s say you had a collection of list items, like this.
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>You want to create a new list item, and add to the end of the list.
Instead of targeting the last list item and using the Element.after() method, you can use the ParentNode.append() method to add it to the end of the list.
// Create a new element
let li = document.createElement('li');
li.textContent = 'I am new here.';
// Get the parent node
let list = document.querySelector('#list');
// Insert the new node after the last element in the parent node
// ...<li>Item 3</li><li>I am new here.</li>
list.append(li);
Appending multiple elements
The ParentNode.append() method can accept multiple elements as arguments.
If you wanted to add two list items, you could do something like this instead.
// Create a new element
let li = document.createElement('li');
li.textContent = 'I am new here.';
// Create another new element
let liToo = document.createElement('li');
liToo.textContent = `I'm new, too!`;
// Get the parent node
let list = document.querySelector('#list');
// You can inject more than one item by passing in multiple arguments
// ...<li>Item 3</li><li>I am new here.</li><li>I'm new, too!</li>
list.append(li, liToo);
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-03-23T14:30:00+00:00) Adding elements to the end of a group with vanilla JS. Retrieved from https://www.scien.cx/2021/03/23/adding-elements-to-the-end-of-a-group-with-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.