Node.cloneNode()

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 (using Node.appendChild() or a similar method). 

deep Optional*

If true, then node and its whole subtree—including text that may be in child Text nodes—is also copied.

If false, only node will be cloned. Any text that node contains is not cloned, either (since text is contained by one or more child Text 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 to true

This behavior has been changed in the latest spec! Although deep it still optional, it now defaults to false.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
cloneNodeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
deep defaults to falseChrome Full support YesEdge Full support 12Firefox Full support 29
Full support 29
No support 13 — 29
Notes
Notes deep defaults to true.
No support No
Notes
Notes Before Firefox 13, deep was a required parameter.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 29
Full support 29
No support 14 — 29
Notes
Notes deep defaults to true.
No support No
Notes
Notes Before Firefox 14, deep was a required parameter.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.