CloneNode() method in JavaScript?

Front End Technology Javascript Web Development

As indicated by the name, it clones the node. The cloneNode() method in JavaScript makes a duplicate of the node object that is sent in and delivers the clone node object. On the element you would like to copy, simply call the cloneNode() method. Pass true as an option if you wish to copy the element's nested elements as well.

It continuously clones all of the node's children if the parameter is true. If not, it simply copies the node itself and not any of its children. The delivered node's parentNode property is null, and it is not a portion of the document tree. Each of an Element node's characteristics are duplicated when the node is copied. But keep in mind that node-registered event-listener functions are not copied. It should be noted that empty components like the <input> and <img> elements are unaffected by deep.

Syntax

let clonedNode = originalNode.cloneNode(deep);

Parameter

true − If the value is true, the text that might be contained in any child Text nodes as well as the entire subtree are copied.
false − When this is false, only the node will be copied. The subtree is not copied, and this includes any text which the node may have.

Return Value

The new Node was cloned. Until a cloned node is attached to another node that is already a portion of the document using a method like Node.appendChild(), it does not have a parent and cannot be a part of the document.

Useful Notes

CloneNode() copies only those attributes and inline listeners from the original node in addition to the DOM structure. Furthermore, it doesn't duplicate any event listeners that were added via the addEventListener() method or by assigning to an element's properties like originalNode. with onclick = eventHandler ().

The id will be duplicated when a node with an id attribute is copied and then placed in the same page. In this example, you must modify the id before included it in the DOM tree.

Example 1

The cloneNode() method is used in the example that follows to copy the ul> element and insert it into the same document.


<!DOCTYPE html>
<html>
<title>CloneNode() method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul id="main_menu">
      <li>Home</li>
      <li>Facilities</li>
      <li>Activities</li>
      <li>Admissions</li>
      <li>Contact</li>
   </ul>
   <script>
      let menuItem = document.querySelector('#main_menu');
      let clonedMenu = menuItem.cloneNode(true);
      clonedMenu.id = 'mobile_menu';
      document.body.appendChild(clonedMenu);
   </script>
</body>
</html>

How it operates −

First, use the querySelector() function to choose the ul with the id menu.
Second, use the cloneNode() method to create a deep clone of the ul element.
Next, In order to prevent duplicates, modify the cloned element's id.
After that, use the appendChild() function to append the cloned element to the document.body's child nodes.

Example 2

In the example that follows, two lists were initially formed. By using javascript method "cloneNode()," one of the elements in the second list is then copied, without changing, to the first list, and also the result is presented as demonstrated in the output.


<!DOCTYPE html>
<html>
<title>CloneNode() method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul id="menu1">
      <li>Home</li>
      <li>Facilities</li>
   </ul>
   <ul id="menu2">
      <li>Activities</li>
      <li>Admissions</li>
   </ul>
   <script>
      let menu_item = document.getElementById("menu2").firstChild;
      let clonedItem = menu_item.cloneNode(true);
      document.getElementById("menu1").appendChild(clonedItem);
   </script>
</body>
</html>

Example 3

In this example let us understand how to Clone a Div and Change its ID with JavaScript

JavaScript's cloneNode method can be used to clone a div and modify its id. The ID of the cloned element can then be configured by setting the id property. The div containing document shows and assign getElementById to div.

Then we clone the div and allocate it to clone by calling div.cloneNode with true. To perform a deep clone, we enter honestly. Finally, we set clone.id to the copied div's ID. After that, we call document.body.appendChild using clone to increase the body.


<!DOCTYPE html>
<html>
<title>CloneNode() method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <div id='tutpoint'>
      Learn coding with tutorialspoint by sitting everywhere
   </div>
   <script>
      const div = document.getElementById('tutpoint')
      const cloneDiv = div.cloneNode(true);
      cloneDiv.id = "tutpoint1";
      document.body.appendChild(cloneDiv);
   </script>
</body>
</html>