In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > objects > DocumentFragment

DocumentFragment object

Browser support:

The DocumentFragment object is a context-free container that is similar to the document object.

There are two ways to create a DocumentFragment object:

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 contents of the DocumentFragment object can be manipulated similarly to the contents of the document object (appendChild, insertBefore, removeChild, ...).

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 hierarcy 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 ( )
	Related objects: document, XMLDocument
•	Range.extractContents ( )

The base interface, through which you can add new functionalities to the DocumentFragment object, is the DocumentFragment interface.

Possible members:

Properties:

attributes

Represents a collection of attribute nodes that belong to an element.

baseURI

			10

Returns the base URL for the object.

childNodes

Represents a collection of all nodes that are direct descendants of an element.

firstChild

Returns a reference to the first child of the current element.

lastChild

Returns a reference to the last child of the current element.

nextSibling

Returns a reference to the next child of the current element's parent.

nodeName

Returns the name of the current node.

nodeType

Returns an integer that indicates the type of the node.

nodeTypeString

Returns the type of the current node as a string.

nodeValue

Sets or returns the value of the current node.

ownerDocument

Returns the document object that contains the current node.

parentNode

Returns the parent element of the current node in the DOM hierarchy.

previousSibling

Returns a reference to the previous node of the current element's parent.

textContent

Sets or returns the text content of an element including the text content of its descendants.

xml

Returns the node and its descendants as a string.

Methods:

addEventListener

	3.6

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

	3.6

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

	3.5

Returns a reference to the first descendant element of the current element, that matches the specified selectors.

querySelectorAll

	3.5

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

	3.6

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

External links:

DocumentFragment (MSDN)
DocumentFragment (Mozilla Developer Center)
DocumentFragment (W3C)

Digg

Del.icio.us

Facebook

Twitter

Diigo