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.

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

js
cloneNode()
cloneNode(deep)

Parameters

deep Optional

If true, then the node and its whole subtree, including text that may be in child Text 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

js
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