HTML DOM cloneNode() Method

Last Updated : 16 Jun, 2023

The HTML DOM cloneNode() Method is used to copy or clone a node on which the cloneNode() method is called. For example, a list item can be copied from one list to another using this method.
Syntax:

yourNode.cloneNode([deep])

Parameters: The [deep] is an optional argument. We can set its value to “true” if we want to copy the node along with its attributes and child nodes and “false” if we want to copy the node and its attributes only.

Note: If we do not specify any argument, then the value of [deep] is taken as false by default.

Example 1: In this example, the elements will be completely cloned by setting deep as true.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML DOM cloneNode() Method</title>
    <style>
        h1,
        h2 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2> A computer science portal for geeks</h2>
    <ul id="list1">
        <li>Geek1</li>
        <li>Geek2</li>
    </ul>
    <ul id="list2">
        <li>Geek3</li>
        <li>Geek4</li>
    </ul>
    <button onclick="clone()">Try it</button>
    <script>
        function clone() {
            // accessing list2 last item and storing it in a variable "geek"
            let listItem =
                document.getElementById("list2").lastChild;
 
            // cloning listItem variable into a variable named clone
            let clone = listItem.cloneNode(true);
 
            // adding our clone variable to end of the list1.
            document.getElementById("list1").appendChild(clone);
        }
    </script>
</body>
 
</html>

Output:

Example 2: In this example, a list item from one list will be copied to the other list using the deep parameter as true.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML DOM cloneNode() Method</title>
    <style>
        h1,
        h2 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2> A computer science portal for geeks</h2>
    <ul id="list1">
        <li>Geek1</li>
        <li>Geek2</li>
    </ul>
    <ul id="list2">
        <li>Geek3</li>
        <li>Geek4</li>
    </ul>
    <button onclick="clone()">Try it</button>
    <script>
        function clone() {
            // accessing list2 last item and storing it in a variable "geek"
            let listItem =
                document.getElementById("list2").lastChild;
 
            // cloning listItem variable into a variable named clone
            let clone = listItem.cloneNode(true);
 
            // adding our clone variable to end of the list1.
            document.getElementById("list1").appendChild(clone);
        }
    </script>
</body>
 
</html>

Output:

We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.

Supported Browser: The browser supported by DOM cloneNode() Method are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 6 and above
Firefox 1 and above
Opera 7 and above
Safari 1.1 and above

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.

Suggest improvement

HTML DOM scrollWidth Property

HTML onunload Event Attribute

Share your thoughts in the comments