HTML - DOM Element cloneNode() Method

Quiz

The HTML DOM Element cloneNode() method creates a clone of a specified element (node) in the document. The term clone refers to a duplicate of a node with the same data but as a duplicate entity.

The clone can include all its attributes and child nodes (when set to true), which allows for dynamic content generation and enables various operations on the document structures.

It accepts an optional parameter "deep", which controls the depth of the cloning. Setting its value to true performs a deep clone, including all child nodes. Setting it to false performs a shallow clone, excluding child nodes.

Syntax

Following is the syntax of the HTML DOM Element cloneNode() method −

originalNode.cloneNode(deep);

Parameters

This method accepts a single parameter as listed below −

Parameter	Description
deep	A boolean value indicating whether to include all child elements in the clone, it is an optional parameter.

Return Value

This method returns the clone node.

Example 1: Cloning a Button Element

The following is the basic example of the HTML DOM Element cloneNode() method. It creates a clone of a <button> element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element cloneNode()</title>
</head>
<body>
<h3>HTML DOM Element cloneNode() Method</h3>
<p>Click button to create clone of it...</p>
<button id="originalButton">Click clone</button>    
<script>
   var originalButton = document.getElementById('originalButton');
   var cloneCount = 0;    
   // Function to handle button click and clone
   originalButton.addEventListener('click', function() {
      // Increment the clone counter
      cloneCount++; 
      // Clone the original button
      var clonedButton = originalButton.cloneNode(true);
      clonedButton.textContent = 'Click me (Clone ' + cloneCount + ')';  
      document.body.appendChild(clonedButton); 
   });
</script>
</body>
</html>

The program creates and adds a clone of a button element to the body.

Example 2: Cloning a List Element

The following is another example of the HTML DOM Element cloneNode() method. We use this method to create a clone of a list (<ul>) element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element cloneNode()</title>
<style>
   ul {
       border: 1px solid #ccc;
       width: 200px;
   }
   button {
       cursor: pointer;
   }
</style>
</head>
<body>
<h3>HTML DOM Element cloneNode() Method</h3>
<p>Click button to create clone of a list...</p>
<ul id="originalList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<button id="cloneButton">Clone List</button>
<script>
   var originalList = document.getElementById('originalList');
   var cloneButton = document.getElementById('cloneButton');        
   cloneButton.addEventListener('click', function() {
      var clonedList = originalList.cloneNode(true);
      // Optional: Assign an id to cloned list
      clonedList.id = 'clonedList'; 
      document.body.appendChild(clonedList);
   });
</script>
</body>
</html>

When the button is clicked, a clone of a "list" will be created and appended to the body.

Example 3: Cloning a div Element

In the example below, this method is used to create a clone of the <div> element and all its child elements −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element cloneNode()</title>
<style>
   .original { 
       padding: 20px;
       margin: 10px;
       border: 1px solid #ccc;
       text-align: center;
   }
   .cloned { 
       padding: 20px;
       margin: 10px;
       border: 1px solid #999;
       text-align: center;
   }
</style>
</head>
<body>
<h3>HTML DOM Element cloneNode() Method</h3>
<div class="original" id="originalDiv"> Original DIV (click me to clone)
</div>    
<script>
   var originalDiv = document.getElementById('originalDiv');
   var cloneCount = 0;         
   originalDiv.addEventListener('click', function() {
      // Increment the clone counter
      cloneCount++;
      // Clone the original div
      var clonedDiv = originalDiv.cloneNode(true);      
      // Customize the cloned div content 
      clonedDiv.textContent = 'Cloned DIV ' + cloneCount;
      clonedDiv.classList.add('cloned'); 
      document.body.appendChild(clonedDiv);
   });
</script>
</body>
</html>

When the user clicks on the "div" element, a clone of it will be created.

Example 4: Cloning a table Element

This example creates a clone of a <table> element with its rows and columns using the cloneNode() method −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element cloneNode()</title> 
<style>
   table {
       border-collapse: collapse;
       margin-bottom: 20px;
   }
   th, td {
       border: 1px solid #ccc;
       padding: 8px; 
   }
   button { 
       cursor: pointer;
   }
</style>
</head>
<body>
<h3>HTML DOM Element cloneNode() Method</h3>
<table id="originalTable">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Nilesh</td>
      <td>43,000,000</td>
   </tr>
   <tr>
      <td>Nikki</td>
      <td>43,101,000</td>
   </tr>
</table>
<button id="cloneButton">Clone Table</button>
<br><br>
<script>
var originalTable = document.getElementById('originalTable');
var cloneButton = document.getElementById('cloneButton');
cloneButton.addEventListener('click', function() {
   var clonedTable = originalTable.cloneNode(true);
   document.body.appendChild(clonedTable);
});
</script>
</body>
</html>

The above program creates a clone of a table having all the data.

Supported Browsers

Method
cloneNode()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom_element_reference.htm

Print Page