cloneNode (W3C DOM Core method)

Spec
Version Depr. Static
DOM1 No No
Browser support (more…)
IE5.5+ FF3+ SA1.3+ OP9+
Full Full Buggy Buggy
Returns
Node

Example

var clone = node.cloneNode(true);

The example above will make a deep clone of node and save its reference to clone.

So if node were the HTML q element in this example:

<p>
  <q>Can you copy <em>everything</em> I say?</q>
</p>

And we cloned it, then appended the clone to the original node's parent:

var clone = node.cloneNode(true);
node.parentNode.appendChild(clone);

We would end up with this:

<p>
  <q>Can you copy <em>everything</em> I say?</q>
  <q>Can you copy <em>everything</em> I say?</q>
</p>
Note: This example includes whitespace that isn’t really there

Actually this example is idealized—the line-break between the first </q> and second <q> tags is just for ease of reading; it hasn't really been created.

Arguments

deep (Boolean) required

If true duplicate the node's sub-tree as well as the node itself. If false only copy the node (and its attributes, if it's an Element).

Description

Creates a duplicate of this node, including all attributes and their values (including attributes which are not explicitly defined but which have a default value in this document type). The duplicate node has no parent (parentNode is null) until it's added to the document, for example using appendChild.

If the deep argument is included and has the value true then the node's sub-tree (if any) will also be duplicated.

Cloning a sub-tree that is readonly results in a sub-tree that can be modified (ie. the sub-tree of a cloned node is always mutable, even if the original was immutable), with the exception that the children of a cloned EntityReference are always readonly.

Cloning an Element node also copies its attributes (including any default attributes), but does not copy its text unless the deep argument is true.

Cloning an Attr node directly (as opposed to attributes that belong to a cloned Element) creates a node for which the specified property is true.

Whether a Document, DocumentType, Entity or Notation node may be cloned is not defined by the DOM, and depends on the implementation (see Compatibility notes below).

Return value

The duplicate node.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.5 2.0 3.0 1.3 2.0 3.0 9.0 9.5
Full Full Full Buggy Buggy Full Buggy Buggy Buggy Buggy Buggy
: Behavior when the “deep” argument is omitted

If the deep argument is omitted, Internet Explorer and Safari assume false, where Opera and Firefox throw an internal error. However the specification does not explicitly say whether the argument is required, therefore neither behavior is considered a bug.

Internet Explorer and Firefox 3 cannot append nodes to this document which were cloned in a different document; all other browsers can.

var clone = request.responseXML.firstChild.cloneNode(true);
document.getElementsByTagName('body').item(0).appendChild(clone);

The cloneNode specification doesn't say whether this should be allowed; however it does specify for appendChild that appended nodes must have the same owner document, and furthermore the importNode method exists specifically for this purpose. Therefore we infer that cloning nodes in a different document for use in this document should not be allowed, and that allowing it is a bug.

DANGER: Potential crash bug in Safari 1.3 and 2

Safari 1.3 and 2 will crash when appending a deep clone to this document that was cloned in another document; a shallow clone (or a clone of a node that has no children) is okay.

Tip: So don’t use this method to move nodes between documents

Overall then — don't use cloneNode to move nodes between documents, use importNode instead, because that's what it's for.

Opera cannot clone Entity or Notation nodes (it throws a DOMException (code 9: NOT_SUPPORTED_ERR)); Internet Explorer can clone these types of nodes. (And these are the only browsers in which they're available in the first place.)

Opera and Safari cannot clone Document or DocumentType nodes (Opera throws a DOMException (code 9: NOT_SUPPORTED_ERR), where Safari creates a null object); Firefox and Internet Explorer can clone these types of nodes (where they're available in the first place).

User-contributed notes

Related Products