cloneNode (W3C DOM Core method)
| Version | Depr. | Static |
|---|---|---|
| DOM1 | No | No |
| 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>
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
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 |
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.
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.
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
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.