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

You are here: Reference > JavaScript > client-side > HTML DOM > methods > cloneNode

cloneNode method

Browser support:

Returns an exact copy of the current node.

The new node contains the same attributes with the same values as the original element. The child elements of the cloned node can also be copied in the original order with the cloneNode method (depending on the first parameter of the cloneNode method). The new node has no parent, use the insertBefore or appendChild method to insert it into the document.

If you need to copy a node from another document into the current document, use the importNode method.

Syntax:

object.cloneNode (cloneChildren);

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

Parameters:

cloneChildren

Required in Firefox and Opera, optional in Internet Explorer, Google Chrome and Safari. Boolean that indicates whether the child element need also be duplicated.

One of the following values:

false

Default in Internet Explorer, Google Chrome and Safari. Do not duplicate the child elements.

true

Duplicate the child elements.

Return value:

Returns the newly created node.

Example HTML code 1:

This example illustrates the use of the cloneNode method:

<head>
    <script type="text/javascript">
        function Clone () {
            var srcTable = document.getElementById ("srcTable");
            var clonedTable = srcTable.cloneNode (true);
            clonedTable.id = "";    // clear the id property of the cloned table

            var container = document.getElementById ("container");
            container.appendChild (clonedTable);
        }
    </script>
</head>
<body>
    <div id="container">
        <table id="srcTable" border="1px">
            <tr>
                <td>Apple</td>
                <td>Peach</td>
                <td>Cherry</td>
            </tr>
        </table>
    </div>
    <br /><br />
    <button onclick="Clone ();">Clone Table!</button>
</body>