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

You are here: Reference > JavaScript > client-side > selection and ranges > methods > extractContents (Range)

extractContents method (Range)

Browser support:

9

Creates a DocumentFragment object, copies the contents of the current Range object into it and removes the contents of current Range from the document tree.

Note: The Range object and its extractContents method are supported in Internet Explorer from version 9.

The DocumentFragment object is a context-free container that is similar to the document object. The DocumentFragment element 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 cloneContents method is similar to the extractContents method, it also creates a DocumentFragment object from the contents of a Range object, but it does not remove the contents of the Range from the document tree. To remove the contents of a Range from the document tree, use the deleteContents method.

Syntax:

object.extractContents ( );

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

Return value:

Returns a DocumentFragment object created from the contents of the current Range.

Example HTML code 1:

This example illustrates the use of the extractContents method:

<head>
    <script type="text/javascript">
        function MoveContent () {
            var srcObj = document.getElementById ("src");
            var destObj = document.getElementById ("dest");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (srcObj);
                var documentFragment = rangeObj.extractContents ();
                destObj.appendChild (documentFragment);
            }
        }
    </script>
</head>
<body>
    <div id="src" style="background-color:#e0a0b0; width:300px; height:50px;">The <b>contents</b> of the <i>source</i> element.</div>
    <div id="dest" style="background-color:#a0e0b0; width:300px; height:50px;"></div>
    <br /><br />
    <button onclick="MoveContent ();">Move the contents!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

A cross-browser solution for the previous example:

<head>
    <script type="text/javascript">
        function MoveContent () {
            var srcObj = document.getElementById ("src");
            var destObj = document.getElementById ("dest");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (srcObj);
                var documentFragment = rangeObj.extractContents ();
                destObj.appendChild (documentFragment);
            }
            else {          // Internet Explorer before version 9
                var documentFragment = document.createDocumentFragment ();
                var child = srcObj.firstChild;
                while (child) {
                    var storeChild = child;
                    child = child.nextSibling;
                    documentFragment.appendChild (storeChild);
                }
                destObj.appendChild (documentFragment);
            }
        }
    </script>
</head>
<body>
    <div id="src" style="background-color:#e0a0b0; width:300px; height:50px;">The <b>contents</b> of the <i>source</i> element.</div>
    <div id="dest" style="background-color:#a0e0b0; width:300px; height:50px;"></div>
    <br /><br />
    <button onclick="MoveContent ();">Move the contents!</button>
</body>