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

You are here: Reference > JavaScript > client-side > HTML DOM > methods > createDocumentFragment (document, XMLDocument)

createDocumentFragment method (document, XMLDocument)

Browser support:

Creates an empty DocumentFragment object.

Note: In Internet Explorer before version 9, the createDocumentFragment method creates an empty document object on HTML documents, and an empty DocumentFragment object on XML documents. From version 9, it creates an DocumentFragment object on both HTML and XML documents.

The DocumentFragment object is a context-free container that is similar to the document object. For more information, see the page for the DocumentFragment object.

Syntax:

object.createDocumentFragment ( );

You can find the related objects in the Supported by objects section below.

Return value:

Returns the created DocumentFragment object in Firefox, Opera, Google Chrome and Safari and in Internet Explorer on XML documents and the created document object in Internet Explorer on HTML documents.

Example HTML code 1:

This example illustrates the use of the createDocumentFragment method:

<head>
    <script type="text/javascript">
        function AddDocFrag (button) {
                // creates a document fragment object
            var docFragment = document.createDocumentFragment ();
                // creates a text node and adds it to the document fragment
            var textNode = document.createTextNode ("The following button is a clone:");
            docFragment.appendChild (textNode);
                // clones the button and adds the clone element to the document fragment
            var buttonClone = button.cloneNode (true);
            docFragment.appendChild (buttonClone);

                // adds the document fragment to the container
            var container = document.getElementById ("container");
            container.appendChild (docFragment);
        }
    </script>
</head>
<body>
    This is the container:
    <div id="container" style="background-color:#e0d0a0; width:400px; height:200px; overflow:auto;"></div>
    <br /><br />
    <button onclick="AddDocFrag (this)">Add a document fragment to the container!</button>
</body>