HTML Element .cloneNode()

Since:		DOM Level 1（1998）

A method that duplicates an HTML element. Passing true clones the element along with all its child elements, while passing false clones only the element itself.

Syntax

// Clone the element including all child elements.
var clone = element.cloneNode(true);

// Clone only the element itself.
var clone = element.cloneNode(false);

Arguments

Argument	Description
true	Clones the HTML element along with all its child elements and text content. This is called a "deep copy."
false	Clones only the HTML element itself, without any child elements or text content. This is called a "shallow copy."

Return Value

Returns the newly cloned HTML element. At this point it has not been added to the DOM, so you need to insert it using a method such as parentElement.appendChild().

Sample Code

sample_cloneNode.html

<ul id="list">
	<li class="item">Item 1</li>
</ul>
<div id="template-card" class="card" style="display: none;">
	<strong class="card-name"></strong>
	<span class="card-org"></span>
</div>
<div id="card-list"></div>

sample_cloneNode.js

// Pattern 1: Difference between deep copy and shallow copy
var list = document.getElementById("list");
var original = document.querySelector(".item");

// cloneNode(true): Clones the element including all child elements.
var deepClone = original.cloneNode(true);
deepClone.textContent = "Item 2 (deep copy)";
list.appendChild(deepClone);

// cloneNode(false): Clones only the element itself — no child elements.
var shallowClone = original.cloneNode(false);
shallowClone.textContent = "Item 3 (shallow copy)";
list.appendChild(shallowClone);

// Pattern 2: Clone a template element to generate a list
// Reuse a hidden template element by cloning it.
var template = document.getElementById("template-card");
var cardList = document.getElementById("card-list");
var members = [
	{ name: "Kiryu Kazuma", org: "Dojima Family" },
	{ name: "Majima Goro",  org: "Majima Family" },
	{ name: "Akiyama Shun", org: "Sky Finance" }
];
members.forEach(function(member) {
	var card = template.cloneNode(true); // Clone including child elements.
	card.style.display = ""; // Remove the hidden state.
	card.removeAttribute("id"); // Remove id to avoid duplicates.
	card.querySelector(".card-name").textContent = member.name;
	card.querySelector(".card-org").textContent = " / " + member.org;
	cardList.appendChild(card);
});

// Pattern 3: Be careful about id duplication after cloning
var original2 = document.getElementById("list");
var clone2 = original2.cloneNode(true);
clone2.id = "list-copy"; // Always change the id to avoid duplication.
document.body.appendChild(clone2);

View sample page

Overview

element.cloneNode() is a method that duplicates an HTML element. Passing true performs a "deep copy" that includes all child elements and text content, while passing false performs a "shallow copy" of the element alone.

The cloned element inherits all attributes and classes from the original. Note that the id attribute is also copied, so be careful to avoid duplicate id values on the page. If needed, use element.setAttribute() to update the id after cloning.

If you add an element that already exists in the DOM via parentElement.appendChild(), it will be moved from its original position. By using element.cloneNode() to create a new copy first, you can place the same content in another location while keeping the original element in place.