JavaScript Node cloneNode() Method

What You’ll Learn

The Node.cloneNode() method returns a duplicate of a node. Learn deep vs shallow cloning, what is and is not copied, the duplicate-id warning, and when to prefer document.importNode().

Introduction

When you need another copy of a DOM node instead of moving the original, cloneNode() is the tool. Pair it with appendChild() to insert the copy.

Cloning copies attributes by default. It does not copy addEventListener handlers or paint data for <canvas>. Always watch for duplicate id values when both nodes stay in the same document.

Understanding cloneNode()

MDN: cloneNode() returns a duplicate of the node. The optional deep flag controls whether the subtree is copied too.

• Attributes — copied, including inline event attributes.
• Subtree — copied only when deep is true.
• Not copied — addEventListener / onevent properties; canvas paint.
• Parent — clone starts detached (parentNode is null).

📝 Syntax

const copy = node.cloneNode();
const deepCopy = node.cloneNode(true);

Parameters

• deep (optional) — true clones the node and its whole subtree; false or omitted clones only the node itself (no children / nested text).

Return value

A new Node that is a copy of the original. It is not in the document until you append or insert it.

⚖️ cloneNode() vs importNode()

MDN: to clone nodes for another document, or template content with custom elements, use importNode() on the target document.

Examples Gallery

Examples follow MDN Node.cloneNode() patterns. Use View Output or Try It Yourself for each case.

const p = document.getElementById("para1");
const p2 = p.cloneNode(true);

console.log(p2.childNodes.length > 0); // true (children copied)
console.log(p2.textContent.trim());    // includes nested text

true
Hello world

const card = document.getElementById("card");
const shell = card.cloneNode(false);

console.log(card.children.length);  // e.g. 1
console.log(shell.children.length); // 0
console.log(shell.className);       // attributes still copied

1
0
box

const source = document.getElementById("source");
const list = document.getElementById("list");

const copy = source.cloneNode(true);
console.log(copy.parentNode); // null

list.appendChild(copy);
console.log(list.children.length); // original + copy

null
2

const original = document.getElementById("card-1");
const copy = original.cloneNode(true);
copy.id = "card-2";

document.getElementById("host").appendChild(copy);

console.log(document.getElementById("card-1") !== null);
console.log(document.getElementById("card-2") !== null);
console.log(document.querySelectorAll("[id='card-1']").length); // 1

true
true
1

const btn = document.getElementById("btn");
let clicks = 0;
btn.addEventListener("click", function () { clicks++; });

const clone = btn.cloneNode(true);
document.getElementById("host").appendChild(clone);

clone.click();
console.log(clicks); // 0 — listener was not copied

btn.click();
console.log(clicks); // 1 — original still works

0
1

🚀 Common Use Cases

• Duplicating a card, list item, or row template already in the DOM.
• Keeping the original in place while inserting a copy elsewhere.
• Building many similar nodes from one prototype with cloneNode(true).
• Shallow-cloning a wrapper when you only need the element shell and attributes.
• Switching to importNode for cross-document or <template> custom elements.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Clones are not kept in sync with the original after creation.
• Prefer importNode for other documents and many <template> + custom element cases.
• Related: appendChild(), compareDocumentPosition(), textContent, addEventListener(), JavaScript hub.

💡 Best Practices