ParentNode.replaceChildren() Method

DOM

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.

Documentation

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

Specification

Established standard

Status in Chromium

Blink components: Blink>DOM

Enabled by default (tracking bug) in:

Chrome for desktop release 86
Chrome for Android release 86
Android WebView release 86

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Firefox: Shipped/Shipping
Edge: No signal
Safari: Shipped/Shipping
Web Developers: No signals

Owner

yuzhehan@chromium.org

Intent to Prototype url

Intent to Prototype thread

Last updated on 2020-10-16