ParentNode.replaceChildren() Method

Category: DOM
Type: New or changed feature
Status: Enabled by default (Chrome 86)
Intent stage: Shipped

Summary

Replaces all children of the ParentNode with the passed-in nodes.

Motivation

Previously, there are a couple different ways to replace a node's children with a new set of nodes. For example: 1. Use node.innerHTML = '' to clear out node's children and call node.append(nodes); Or: 2. Loop through node's children and call node.removeChild() on each one. Then call node.append(nodes). This replaceChildren API enables web developers to easily replace node's children without spending cycles on which way is best.

Standards & signals

Specification: https://dom.spec.whatwg.org/#dom-parentnode-replacechildren
Firefox: Shipped/Shipping
Safari: Shipped/Shipping
Web developers: No signals
Tracking bug: http://crbug.com/1067384

Docs: https://github.com/whatwg/dom/issues/478

Explainers: https://github.com/yuzhe-han/ParentNode-replaceChildren

View on chromestatus.com