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:
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
.png)
