DOM fragment
A DOM fragment is a lightweight, detached node that can hold a subtree of nodes independently of a document tree.
Web Components in Action
A document fragment is a lightweight DOM node that can contain a subtree of nodes without itself being part of a document tree.
- How it is used
- Uses fragments to assemble reusable HTML and batch DOM insertion, especially when templates or repeated content are involved.
- How deep it goes
- Explains construction, child movement, and insertion performance, but stops short of broader DOM implementation internals.
- Examples
- Demonstrates five generated paragraphs, template content cloning, and inspection of shadow roots in browser developer tools.
- What you can do after
- Apply it via JavaScript DOM APIs to build node groups and insert them into a document with one append operation.
Secrets of the JavaScript Ninja, Second Edition
A lightweight, detached portion of a DOM tree that can be manipulated separately before being inserted into a document.
- How it is used
- Supports efficient insertion of generated HTML into one or more locations in a document.
- How deep it goes
- Defines fragments as node containers and demonstrates adding, inserting, and cloning them.
- Examples
- Demonstrates building nodes from an HTML string and inserting a fragment into multiple document locations.
- What you can do after
- Apply it via document.createDocumentFragment() to batch node insertion and clone content for additional targets.
Read how Secrets of the JavaScript Ninja, Second Edition explains DOM fragment →
Related concepts
- shadow rootincludes · A shadow root is the root node of an encapsulated Shadow DOM subtree attached to a host element.
- HTML template elementused by · The HTML template element holds inert markup that can be cloned and inserted into a document.
- template content propertyproduced by · The template content property returns an HTML template element’s stored contents as a DocumentFragment.
- reflowaddresses · Reflow is the recalculation or rearrangement of document content and layout to accommodate changes in content, styling, or available display space.
- documentuses · A web document is a structured HTML or XML resource represented by a document tree that browser APIs expose for inspection and manipulation.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.