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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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() {
            // accesing 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>

chevron_right


Output:

Before clicking the button:

After clicking the button:

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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 arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai



Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.