DocumentFragment

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made.
   EventTarget     Node     DocumentFragment  

Constructor
 DocumentFragment()  Creates and returns a new DocumentFragment object.  
Properties

This interface has no specific properties, but inherits those of its parent, Node.  
DocumentFragment.childElementCount Read only 
  Returns the amount of child elements the DocumentFragment has.  
DocumentFragment.children Read only 
  Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment object.  
DocumentFragment.firstElementChild Read only 
  Returns the Element that is the first child of the DocumentFragment object, or null if there is none.  
DocumentFragment.lastElementChild Read only 
  Returns the Element that is the last child of the DocumentFragment object, or null if there is none.  

Methods

This interface inherits the methods of its parent, Node.  DocumentFragment.append()  Inserts a set of Node objects or DOMString objects after the last child of the document fragment.  DocumentFragment.prepend()  Inserts a set of Node objects or DOMString objects before the first child of the document fragment.  DocumentFragment.querySelector()  Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.  DocumentFragment.querySelectorAll()  Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.  DocumentFragment.replaceChildren()  Replaces the existing children of a DocumentFragment with a specified new set of children.  DocumentFragment.getElementById()  Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID. Functionally equivalent to Document.getElementById().  

Usage notes

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild() or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately. This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content property. An empty DocumentFragment can be created using the document.createDocumentFragment() method or the constructor.

Example
HTML
<ul id="list"></ul>

JavaScript
var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.textContent = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

Result

Specifications

Specification
DOM Standard # interface-documentfragment

Browser compatibility




Desktop
Mobile



Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet




DocumentFragment
1
12
1
6
8
3
1
18
4
10.1
1
1.0


DocumentFragment
29
17
24
No
16
8
4.4
29
24
16
8
2.0


getElementById
36
17
28
No
23
9
37
36
28
24
9
3.0


append
54
17
49
No
41
10
54
54
49
41
10
6.0


childElementCount
29
17
25
No
16
9
4.4
29
25
16
9
2.0


children
29
16
25
No
16
9
4.4
29
25
16
9
2.0


firstElementChild
29
17
25
No
16
9
4.4
29
25
16
9
2.0


lastElementChild
29
17
25
No
16
9
4.4
29
25
16
9
2.0


prepend
54
17
49
No
41
10
54
54
49
41
10
6.0


querySelector
1
12
3.5

9
8

querySelectorAll() is supported, but only for CSS 2.1 selectors.

10
4
≤37
18
4
10.1
3
1.0


querySelectorAll
1
12
3.5

9
8

querySelectorAll() is supported, but only for CSS 2.1 selectors.

10
4
≤37
18
4
10.1
3
1.0


replaceChildren
86
86
78
No
72
14
86
86
79
61
14
14.0



See also
 The DOM interfaces index. 


Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Mar 30, 2022, by MDN contributors


    
{'path': 'public/docs/dom/documentfragment.html', 'source': 'DevDocs.IO'}