DocumentFragment

DocumentFragment is a minimal, lightweight container used to hold a portion of a document. It is a Node with nodeType 11 and nodeName "#document-fragment". A DocumentFragment is not part of the active document tree and has no parent. It can contain other nodes—elements, text nodes, and comments—but it itself does not render and cannot be styled.

Creation and use: Create a fragment with document.createDocumentFragment(). Build the subtree by creating and appending nodes to the fragment. When ready, insert it into the document with a single operation, for example target.appendChild(fragment). In most browsers, the fragment's children are moved into the target and the fragment becomes empty.

Benefits and behavior: Because the fragment exists off the live DOM, appending its children reduces layout thrashing by batching multiple insertions into a single reflow. It is especially useful when constructing large lists or trees before attaching them to the document.

Methods and characteristics: As a Node, DocumentFragment supports standard Node methods such as appendChild, removeChild, and cloneNode. It has no attributes, and its nodeValue is typically null. When attached, its children become part of the target and the fragment itself is emptied and can be discarded.

Compatibility and limitations: DocumentFragment is widely supported in modern browsers. It cannot be styled or referenced by CSS, since it is not rendered itself. Event handling uses actual elements within the fragment once it is inserted.

Example: const frag = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const li = document.createElement('li'); li.textContent = 'Item ' + (i + 1); frag.appendChild(li); } document.querySelector('#list').appendChild(frag);

---