Skip to content
Related Articles

Related Articles

HTML | DOM cloneNode() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Jun, 2022

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: 
 

html




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

html




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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!