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
param1, …,paramN-
A set of
Nodeobjects or strings to replace theDocumentFragment's existing children with. If no replacement objects are specified, then theDocumentFragmentis emptied of all child nodes.
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 []