HTML | DOM cloneNode() Method

Last Updated : 26 Nov, 2019

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

Syntax:

yourNode.cloneNode([deep])

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 true by default.

Example-1:

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML|DOM cloneNode() Method</title>
    <!-- Set CSS property to the element -->
    <style>
        h1,
        h2 {
            color: green;
        }
    </style>
</head>
  
<body style="text-align: center;">
    <div style="border:3px solid green">
        <h1>
           GeeksforGeeks
        </h1>
  
        <h2>
          A computer science portal for geeks
        </h2>
    </div>
  
    <button onclick="nClone()">
        Click here to clone the above elements.
    </button>
  
    <!-- nClone() function is used to fetch our node 
     and apply cloneNode method on it 
     and cloning it with another element-->
    <script>
        function nClone() {
            // accessing div attribute using a
            //variable geek
            var geek = 
                document.getElementsByTagName("DIV")[0];
  
            // cloning geek variable into a variable
           //named clone
            var clone = geek.cloneNode(true);
  
            // adding our clone variable to end
             //of the document
            document.body.appendChild(clone);
        }
    </script>
</body>
  
</html>

Output:

Before clicking the button:

After clicking the button:

Example-2:

<!DOCTYPE html> 
<html>
       
    <head> 
        <title>HTML|DOM cloneNode() Method</title>
        <!-- Set CSS property to the element -->
        <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"
            var listItem = document.getElementById("list2").lastChild; 
          
        // cloning lisItem variable into a variable named clone
        var clone = listItem.cloneNode(true);
          
            // adding our clone variable to end of the list1.
        document.getElementById("list1").appendChild(clone);     
    }
</script>
</body>
  
</html>                    

Output:

Before clicking the button:

After clicking the button:

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

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

HTML | DOM cloneNode() Method