DocumentFragment object
The DocumentFragment object is a context-free container that is similar to the document object.
There are two ways to create a DocumentFragment object:
The contents of the DocumentFragment object can be manipulated similarly to the contents of the document object (appendChild, insertBefore, removeChild, ...).
- An empty DocumentFragment object can be created with the createDocumentFragment method
- or it can be created with some initial content through the Range object.
The DocumentFragment object is useful if you want to create complex HTML content, where you can find, replace, remove or insert elements, and when you are done, the contents can be inserted into the document tree.
The DocumentFragment object can be inserted into the DOM hierarchy with the standard node manipulation methods (appendChild, insertBefore).
If a DocumentFragment object is placed into the document tree, only its contents are inserted.Syntax:
Methods that return the object:
| • | Range.cloneContents ( ) |
| • | Range.createContextualFragment (HTMLtext) |
| + | object.createDocumentFragment ( ) |
| • | Range.extractContents ( ) |
The base interface, through which you can add new functionalities to the DocumentFragment object, is the DocumentFragment interface.
Possible members:
Properties:
| Represents a collection of attribute nodes that belong to an element. | ||||||||||||
|
Returns the base URL for the object. | |||||||||||
| Represents a collection of all nodes that are direct descendants of an element. | ||||||||||||
| Returns a reference to the first child of the current element. | ||||||||||||
| Returns a reference to the last child of the current element. | ||||||||||||
| Returns a reference to the next child of the current element's parent. | ||||||||||||
| Returns the name of the current node. | ||||||||||||
| Returns an integer that indicates the type of the node. | ||||||||||||
| Returns the type of the current node as a string. | ||||||||||||
| Sets or returns the value of the current node. | ||||||||||||
| Returns the document object that contains the current node. | ||||||||||||
| Returns the parent element of the current node in the DOM hierarchy. | ||||||||||||
| Returns a reference to the previous node of the current element's parent. | ||||||||||||
| Sets or returns the text content of an element including the text content of its descendants. | ||||||||||||
| Returns the node and its descendants as a string. |
Methods:
| addEventListener |
|
Registers an event handler function (event listener) for the specified event on the current object. | ||||||||||
| appendChild | Inserts an element after the last child of the current element. | |||||||||||
| cloneNode | Returns an exact copy of the current node. | |||||||||||
| compareDocumentPosition | Compares the placement of the specified node with the current node in the DOM hierarchy. | |||||||||||
| dispatchEvent |
|
Dispatches the specified event to the current element. | ||||||||||
| hasAttributes | Returns whether the current element has any attributes specified or not. | |||||||||||
| hasChildNodes | Returns whether the current node has any child nodes or not. | |||||||||||
| insertBefore | Inserts an element before the specified child of the current element. | |||||||||||
| isDefaultNamespace | Returns whether the specified namespace URI is the default namespace in the scope of the current node. | |||||||||||
| isEqualNode | Returns whether the current node is equal to the specified one. | |||||||||||
| isSameNode | Returns whether the current node is the same node as the specified one. | |||||||||||
| isSupported | Returns whether the specified DOM module and version is supported by the current node. | |||||||||||
| lookupNamespaceURI | Retrieves the namespace URI associated with the specified namespace prefix in the scope of the current node. | |||||||||||
| lookupPrefix | Retrieves the namespace prefix associated with the specified namespace URI in the scope of the current node. | |||||||||||
| normalize | Puts the subtree that belongs to the current node into a 'normalized' form. | |||||||||||
| querySelector |
|
Returns a reference to the first descendant element of the current element, that matches the specified selectors. | ||||||||||
| querySelectorAll |
|
Returns a NodeList collection that contains all descendant elements of the current element that match the specified selectors. | ||||||||||
| removeChild | Removes the specified child node from the current element. | |||||||||||
| removeEventListener |
|
Removes the specified event handler from the current element that was registered earlier with the addEventListener method. | ||||||||||
| replaceChild | Replaces the specified child element of the current element with a new element. |
Example HTML code 1:
This example shows how to create a new DocumentFragment object, how to add a text node to it, and how to insert the DocumentFragment into the body element.
|
|
||||
<head> <script type="text/javascript"> function AddDocFrag () { var newDocFrag = document.createDocumentFragment (); var newText = document.createTextNode ("new text"); newDocFrag.appendChild (newText); var container = document.getElementById ("container"); container.appendChild (newDocFrag); } </script> </head> <body> <button onclick="AddDocFrag ()">Add a new document fragment!</button> <div id="container"></div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
This example shows how to create a DocumentFragment object from a Range object.
|
|
||||
<head> <script type="text/javascript"> function CopyContent () { if (document.createRange) { rangeObj = document.createRange (); rangeObj.selectNodeContents (document.body); documentFragment = rangeObj.cloneContents (); var container = document.getElementById ("container"); container.appendChild (documentFragment); } } </script> </head> <body> <button onclick="CopyContent ();">Clone contents!</button> <div id="container"></div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments