The Node.cloneNode()
method returns a duplicate of the node on which this method was called.
Syntax
let newClone = node.cloneNode([deep])
node
- The node to be cloned.
newClone
-
The new node, cloned from
node
.The
newClone
has no parent and is not part of the document, until it is added to another node that is part of the document (usingNode.appendChild()
or a similar method). deep
Optional*-
If
true
, thennode
and its whole subtree—including text that may be in childText
nodes—is also copied.If
false
, onlynode
will be cloned. Any text thatnode
contains is not cloned, either (since text is contained by one or more childText
nodes).deep
has no effect on empty elements (such as the<img>
and<input>
elements).*Note: In the DOM4 specification (since Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), the optional
deep
argument defaults totrue
.This behavior has been changed in the latest spec! Although
deep
it still optional, it now defaults tofalse
.You should always provide an explicit value for backward and forward compatibility.
- With Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3)), the console warned developers not to omit the argument.
- Starting with Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), a shallow clone is defaulted instead of a deep clone.
Example
let p = document.getElementById("para1") let p_prime = p.cloneNode(true)
Notes
Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using addEventListener()
or those assigned to element properties (e.g., node.onclick = someFunction
). Additionally, for a <canvas>
element, the painted image is not copied.
Warning: cloneNode()
may lead to duplicate element IDs in a document!
If the original node has an id attribute
, and the clone will be placed in the same document, then you should modify the clone's ID to be unique.
Name
attributes may need to be modified also, depending on whether duplicate names are expected.
To clone a node to insert into a different document, use Document.importNode()
instead.
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Node.cloneNode()' in that specification. |
Living Standard | |
Document Object Model (DOM) Level 3 Core Specification The definition of 'Node.cloneNode()' in that specification. |
Obsolete | |
Document Object Model (DOM) Level 2 Core Specification The definition of 'Node.cloneNode()' in that specification. |
Obsolete | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
cloneNode | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 6 | Opera Full support 7 | Safari Full support 1.1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
deep defaults to false | Chrome Full support Yes | Edge Full support 12 | Firefox
Full support
29
| IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android
Full support
29
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.