HTML | DOM cloneNode() Method

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

My Personal Notes

Recommended Posts: