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

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

cloneContents method (Range)

Browser support:

9

Creates a DocumentFragment object and copies the contents of the current Range object into it.

Note: The Range object and its cloneContents 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 extractContents method is similar to the cloneContents method, it also creates a DocumentFragment object from the contents of a Range object, but it removes 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.cloneContents ( );

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 shows how to clone the contents of the body element:

<head>
    <script type="text/javascript">
        function CloneContainerContent () {
            var container = document.getElementById ("container");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (container);
                var documentFragment = rangeObj.cloneContents ();
                container.appendChild (documentFragment);
            }
        }
    </script>
</head>
<body>
    <div id="container">
        This text and the following button is inside the container.
        <br />
        <button onclick="CloneContainerContent ();">Clone the contents of the container!</button>
        <br />
    </div>
</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 CloneContainerContent () {
            var container = document.getElementById ("container");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (container);
                var documentFragment = rangeObj.cloneContents ();
                container.appendChild (documentFragment);
            }
            else {          // Internet Explorer before version 9
                var documentFragment = document.createDocumentFragment ();
                var child = container.firstChild;
                while (child) {
                    var childClone = child.cloneNode (true);
                    documentFragment.appendChild (childClone);
                    child = child.nextSibling;
                }
                container.appendChild (documentFragment);
            }
        }
    </script>
</head>
<body>
    <div id="container">
        This text and the following button is inside the container.
        <br />
        <button onclick="CloneContainerContent ();">Clone the contents of the container!</button>
        <br />
    </div>
</body>