The Old NetISSUE #38 of 60

cloning nodes · cloneNode deep vs shallow

Pixel PeteVSQuirks Mode

Pixel Pete sayscloneNode copies a node — shallow (just the node) or deep (with descendants).

node.cloneNode(false) copies just the element; cloneNode(true) copies it and its entire subtree. Useful for templating: build one node, clone it per data item. Note clones don't carry event listeners added via addEventListener (those aren't part of the DOM), and ids will duplicate — fix them after cloning.

Power-ups you unlock

cloneNode(false) = shallow; (true) = deep
Great for cloning a template per item
Clones drop addEventListener handlers
Duplicate ids must be fixed after cloning

Quirks Mode attacks — common mistakes

Expecting listeners to clone (they don’t)
Cloning shallow when you needed the subtree
Leaving duplicate ids on clones

Boss battleDeep-clone a template node, change its text, and append the copy.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="t" style="padding:8px;background:#140a28">template</div><div id="o"></div>
<script>const c=document.getElementById('t').cloneNode(true);c.id='';c.textContent='clone';document.getElementById('o').append(c);</script></body></html>

▶ Open the interactive comic issue

‹ Removing Nodes · RemoveChild Element.Style · Changing Inline Css ›