cloneNode()?node.cloneNode(deep) returns a duplicate of the node (MDN). Pass true to copy the whole subtree; omit or pass false for a shallow copy.
Status: Baseline Widely available (since July 2015) — not Deprecated, Experimental, or Non-standard. Warning: clones can duplicate id values — rename before inserting.
node.cloneNode() → shallow (node only; default deep=false)
node.cloneNode(true) → deep (node + descendants)
Copies attributes (incl. inline onclick="...")
Does NOT copy addEventListener / node.onclick = fn
Clone has no parent until you appendChild / insertBefore
Same document + same id → fix the clone's id| Goal | Prefer |
|---|---|
| Copy in same document | cloneNode(true|false) |
| Copy into another document / templates | importNode() |
| Insert the copy | appendChild() |
cloneNode()Clone, optionally fix id, then insert the copy into the tree.
cloneNode(true) (deep) or cloneNode() (shallow).id / name if needed.appendChild (or similar).| Piece | Required? | Role |
|---|---|---|
deep | No | true = subtree; default false |
| Return | — | New Node (not in the document yet) |
| Listeners | — | Inline attrs yes; addEventListener no |
original = getElementById("card")
copy = original.cloneNode(true) // deep
if copy.id:
copy.id = "card-2" // avoid duplicate ids
parent.appendChild(copy)
→ original stays; copy is a new sibling/subtreeKeep these facts handy when copying DOM nodes.
| Topic | Detail |
|---|---|
| Syntax | node.cloneNode() / node.cloneNode(deep) |
Default deep | false (shallow) |
| Returns | Detached clone (no parent yet) |
| Attributes | Copied (including inline handlers) |
| JS listeners | Not copied (addEventListener / onclick =) |
| IDs | May duplicate — rename the clone |
vs importNode | Other document / template custom elements |
| Standard | Baseline Widely available (since July 2015) |
Clone the sample card shallow or deep, then append the copy to the list.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
MDN-style: copy the node and its subtree.
const p = document.getElementById("para1");
const p2 = p.cloneNode(true);
console.log(p2.textContent);Default / false: element shell only — no children.
const card = document.getElementById("card");
const shell = card.cloneNode(false);
console.log(shell.childNodes.length); // 0
console.log(shell.className); // attributes keptdeep has little effect (MDN).MDN warning: rename id before inserting into the same document.
const original = document.getElementById("item");
const copy = original.cloneNode(true);
copy.id = "item-2";
document.getElementById("list").appendChild(copy);id.name.addEventListener stays on the original only (MDN).
const btn = document.getElementById("btn");
btn.addEventListener("click", () => console.log("hi"));
const copy = btn.cloneNode(true);
document.body.appendChild(copy);
// clicking copy does NOT log "hi" — re-bind if neededTypical workflow: deep clone + appendChild.
const list = document.getElementById("list");
const item = document.getElementById("item");
list.appendChild(item.cloneNode(true));
console.log(list.children.length);appendChild(item) alone would relocate.Check these before cloning into a live document.
MDN: if the original has an id, change the clone’s id before inserting into the same document.
Inline attribute handlers copy; addEventListener and node.onclick = fn do not.
MDN: for <template> content with custom elements, use document.importNode().
You must appendChild / insertBefore the clone yourself.
Node.cloneNode() is marked Baseline Widely available on MDN (since July 2015).
Returns a duplicate node. deep=true copies the subtree. Attributes copy; addEventListener does not. Watch for duplicate IDs.
Bottom line: Safe everyday DOM API. Rename ids, re-bind listeners, and use importNode for other documents / templates. See the MDN cloneNode reference.
| Approach | Cost | Best for |
|---|---|---|
cloneNode(false) | Cheap | Empty shell / void elements |
cloneNode(true) | O(subtree size) | Full UI card / list item |
| Many deep clones | Can be heavy | Batch carefully / reuse templates |
Deep clones walk the whole subtree. For repeated UI, clone a small template node rather than a huge branch every time.
true copies descendants; default is shallow.addEventListener on the clone.One line: cloneNode copies a node (optionally its tree) — insert it, fix ids, re-bind JS listeners.
Learn how two nodes relate in the document tree.
8 people found this page helpful