= DOM document fragment
{c}
A <DOM document fragment> is a <DOM node> that can hold a sequence of other <DOM nodes> without being a document element. Inserting an ordinary fragment into another node inserts its children in order; it does not insert the fragment itself as a wrapper.<DOM Standard by WHATWG>[§4.7, DocumentFragment; §4.2.3, insert algorithm for a DocumentFragment]{ref}
For example, let `const f = document.createDocumentFragment();` and append two newly created paragraph <DOM elements> to `f`. Each paragraph's parent is now `f`. If an empty section element `s` receives `s.appendChild(f)`, the section has the two paragraphs as children and `f.childNodes.length` is zero. The paragraph objects have moved; neither a fragment wrapper nor two automatically cloned paragraphs appear.
This is useful when preparing a group of <DOM nodes> for insertion at one place. The group can include <DOM text nodes> as well as <DOM elements>. Appending more children to the emptied fragment prepares a new group without changing the nodes already transferred.
A <DOM document fragment>'s grouping behavior is a structural guarantee. Whether constructing a particular page this way improves speed depends on the implementation and workload. Inspecting the resulting <DOM tree> directly checks the operation's structural effect.
Back to article page
