DOM document fragment

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.^[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.