DocumentFragment (W3C DOM Core object)
| Version | Depr. | Parent |
|---|---|---|
| DOM1 | No | Node |
| IE5.5+ | FF1.5+ | SA1.3+ | OP9+ |
|---|---|---|---|
| Partial | Full | Full | Full |
Example
var fragment = document.createDocumentFragment();
var heading = fragment.appendChild(document.createElement('h1'));
heading.appendChild(document.createTextNode('Quotes by Yoda'));
var blockquote = fragment.appendChild(document.createElement('blockquote'));
var p = blockquote.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode('Always two there are'));
document.getElementsByTagName('body').item(0).appendChild(fragment);
The example above creates a document fragment, adds some HTML to it, then
appends the entire sub-tree to the <body> of the
main document.
So, if the original HTML looked like this:
<body> </body>
The operation above would result in this1:
<body>
<h1>Quotes by Yoda</h1>
<blockquote>
<p>Always two there are</p>
</blockquote>
</body>
Description
The
DocumentFragment interface inherits from Node, and is a lightweight version of the Document interface, intended for temporary storage of DOM
structures. For example, it can be used as a temporary canvas for building
a group of nodes, or to store a group of nodes while moving it from one
part of a document to another.
Many node manipulation methods can
take a document fragment as their argument (for example, appendChild), and this results in the fragment's entire
sub-tree being appended, but not the DocumentFragment
itself — a document fragment is a virtual construct, and never actually
appears in a document.
A DocumentFragment node
can have Element, ProcessingInstruction, Comment, Text, CDATASection and EntityReference nodes as children.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.5 | 2.0 | 3.0 | 1.3 | 2.0 | 3.0 | 9.0 | 9.5 |
| Partial | Partial | Partial | Full | Full | Full | Full | Full | Full | Full | Full |
Internet Explorer 5.5 in HTML doesn't implement this interface.
Internet Explorer 6 and
7 don't inherit the normalize
method from Node.
Viewlink content in Internet Explorer2
is referred to as a "document fragment" in the MSDN
documentation, but it actually isn't a
DocumentFragment, it's a Document.
The ability to append nodes to a document fragment which were
created in a different document varies by browser, from working fine
at one end, to crashing at the other. For details please see appendChild.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.