Replace all Child nodes of an Element using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jan 5, 2022

banner

Check out my new book

Replace all Child nodes of an Element using JavaScript #

Use the replaceChildren() method to replace all child nodes of an element with a specified new set of children, e.g. element.replaceChildren(...newChildNodes). The method takes a set of Node objects and replaces the element's existing children with them.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"> <p>Apple</p> <p>Pear</p> <p>Banana</p> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); const p1 = document.createElement('p'); p1.innerHTML = '<span style="background-color: coral">Red</span>'; const p2 = document.createElement('p'); p2.innerHTML = '<span>Green</span>'; const p3 = document.createElement('p'); p3.innerHTML = '<span style="background-color: yellow">Yellow</span>'; box.replaceChildren(p1, p2, p3);

The replaceChildren method can be used to:

  • empty a node of all its children (when no parameter is passed to the method)
  • transfer nodes between elements
  • replace all of a node's children

We used the method to replace all of the child nodes of an element, however here is an example that transfers the child nodes of one div element to the other.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"> <p>Apple</p> <p>Pear</p> <p>Banana</p> </div> <div id="replacement"> <p>Red</p> <p>Green</p> <p>Yellow</p> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); const replacementNodes = document.querySelectorAll('#replacement p'); box.replaceChildren(...replacementNodes);

We used the querySelectorAll method to select a collection of the p elements inside of the div with id set to replacement.

Because the replaceChildren method expects comma separated nodes, we had to use the spread operator (...) to unpack the nodes when calling the method.

The example above transfers the child nodes between the two div elements without having to iterate over the collections.

You can also pass Text nodes as parameters to the replaceChildren method.

index.js
const box = document.getElementById('box'); const p1 = document.createElement('p'); p1.innerHTML = '<span style="background-color: coral">Red</span>'; const p3 = document.createElement('p'); p3.innerHTML = '<span style="background-color: yellow">Yellow</span>'; box.replaceChildren(p1, 'Green', p3, 'Blue');

The method takes as many Node or DOMString objects as necessary and replaces the current child nodes of the element with the provided nodes.

The method can also easily be used to empty a node.

index.js
const box = document.getElementById('box'); box.replaceChildren();

Calling the method without any parameters empties the node of all its children.

Use the search field on my Home Page to filter through my more than 3,000 articles.