Node: cloneNode() method
The cloneNode()
method of the Node
interface
returns 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 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.
Also, name
attributes may need to be modified,
depending on whether duplicate names are expected.
To clone a node to insert into a different document, use
Document.importNode()
instead.
Syntax
cloneNode()
cloneNode(deep)
Parameters
deep
Optional-
If
true
, then the node and its whole subtree, including text that may be in childText
nodes, is also copied.If
false
, only the node will be cloned. The subtree, including any text that the node contains, is not cloned.Note that
deep
has no effect on void elements, such as the<img>
and<input>
elements.
Return value
The new Node
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,
using Node.appendChild()
or a similar method.
Example
let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);
Specifications
Specification |
---|
DOM Standard # ref-for-dom-node-clonenode① |
Browser compatibility
BCD tables only load in the browser