Node: cloneNode() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
ThecloneNode() method of theNode interfacereturns a duplicate of the node on which this method was called.Its parameter controls if the subtree contained in a node is also cloned or not.
Cloning a node copies all of its attributes and their values,including intrinsic (inline) listeners. It doesnot copy event listeners addedusingaddEventListener() orthose 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 anid attribute, and the clonewill be placed in the same document, then you should modify the clone's ID to beunique.
Also,name attributes may need to be modified,depending on whether duplicate names are expected.
To clone a node to insert into adifferent document, useDocument.importNode() instead.
Syntax
cloneNode()cloneNode(deep)Parameters
deepOptionalIf
true, then the node and its whole subtree,including text that may be in childTextnodes,is also copied.If
falseor omitted, only the node will be cloned.The subtree, including any text that the node contains, is not cloned.Note that
deephas no effect onvoid elements,such as the<img>and<input>elements.
Return value
The newNode cloned.The cloned node 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.
Example
const p = document.getElementById("para1");const p2 = p.cloneNode(true);Specifications
| Specification |
|---|
| DOM # ref-for-dom-node-clonenode① |