replaceChildren

replaceChildren is a method on the Node interface of the Document Object Model (DOM). It replaces all the children of a node with a new set of nodes, performing the update in place. Unlike methods that parse HTML, replaceChildren works with existing DOM nodes and does not create nodes from strings.

Syntax and usage: node.replaceChildren(...nodes) accepts a sequence of Node objects (or a mixture of Node objects, such as Elements, Text nodes, or DocumentFragments). If no arguments are provided, the node’s children are removed. The method mutates the target node and returns void. You can pass multiple nodes to insert them in order, and you can also pass a DocumentFragment to insert its contained nodes efficiently.

Example:

const container = document.getElementById('container');

container.replaceChildren(document.createElement('span'), document.createTextNode('Hello'), document.createElement('strong'));

This call clears the container’s existing children and replaces them with the newly provided nodes.

Advantages and use cases: replaceChildren offers a concise and efficient way to update a element’s contents without constructing partial DOM changes or parsing HTML. It minimizes layout thrashing by performing the replacement as a single operation and is particularly useful for re-rendering dynamic lists or templates.

Compatibility: Modern browsers across Chrome, Firefox, Edge, and Safari support replaceChildren. It may not be available in older browsers or legacy environments, so feature detection is recommended for production code.

See also: innerHTML, replaceWith, appendChild, Text, DocumentFragment.