Node.cloneNode

Redirected from en/DOM/element.cloneNode

Table of contents

  1. 1. Summary
  2. 2. Syntax
  3. 3. Example
  4. 4. Notes
  5. 5. Browser compatibility
  6. 6. Specification
Page Notifications Off

« Gecko DOM Reference

Summary

Returns a duplicate of the node on which this method was called.

Syntax

var dupNode = node.cloneNode(deep);
node
The node to be cloned.
dupNode
The new node that will be a clone of node
deep Optional
true if the children of the node should also be cloned, or false to clone only the specified node.

Note: In the DOM4 specification (as implemented in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0) ), deep is an optional argument. If omitted, the method acts as if the value of deep was true, defaulting to using deep cloning as the default behavior. If you want to use shallow cloning, you need to explicitly set this argument to false.

In browsers supporting previous versions of the DOM, you always need to provide this argument.

Example

var p = document.getElementById("para1"),
    p_prime = p.cloneNode(true);

Notes

Cloning a node copies all of its attributes and their values but does not copy event listeners.

The duplicate node returned by cloneNode() 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. It also has no parent until it is appended to another node.

If deep is set to false, none of the child nodes are cloned. Any text that the node contains is not cloned either, as it is contained in one or more child Text nodes.

If deep evaluates to true, the whole subtree (including text that may be in child Text nodes) is copied too. For empty nodes (e.g. <img> and <input> elements) it doesn't matter whether deep is set to true or false but you still have to provide a value.

Warning: cloneNode() may lead to duplicate element IDs in a document.

The duplicate node returned by cloneNode() receives a new uniqueID when it is added to another node

To clone a node for appending to a different document, use Document.importNode() instead.

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
deep as an optional parameter ? 13.0 (13.0) ? ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
deep as an optional parameter ? ? 13.0 (13.0) ? ? ?

Tags (4)

Edit tags

Attachments (0)

 

Attach file