DocumentFragment: replaceChildren() method
The DocumentFragment.replaceChildren() method replaces the
existing children of a DocumentFragment with a specified new set of children. These
can be string or Node objects.
Syntax
js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* …, */ paramN)
Parameters
Return value
None (undefined).
Exceptions
HierarchyRequestErrorDOMException-
Thrown when the constraints of the node tree are violated.
Examples
Emptying a document fragment
replaceChildren() provides a very convenient mechanism for emptying a document fragment
of all its children. You call it on the document fragment without any argument specified:
js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);
fragment.children; // HTMLCollection [<div>, <p>]
fragment.replaceChildren();
fragment.children; // HTMLCollection []
Specifications
| Specification |
|---|
| DOM Standard # ref-for-dom-parentnode-replacechildren① |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
replaceChildren | |||||||||||