Web/API/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
DOMThe definition of 'Node.cloneNode()' in that specification.	Living Standard
Document Object Model (DOM) Level 3 Core SpecificationThe definition of 'Node.cloneNode()' in that specification.	Obsolete
Document Object Model (DOM) Level 2 Core SpecificationThe definition of 'Node.cloneNode()' in that specification.	Obsolete	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`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 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 Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox 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 Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
See implementation notes.': See implementation notes.

Node.cloneNode() by Mozilla Contributors is licensed under CC-BY-SA 2.5.