This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

cloneNode

Summary

Copies a reference to the object from the document hierarchy.

Method of dom/Nodedom/Node

Syntax

var clonedNode = node.cloneNode(/* see parameter list */);

Parameters

cloneDescendants

Data-type
Boolean

Whether to clone the child nodes of the node as well.

Return Value

Returns an object of type DOM NodeDOM Node

The cloned node.

Examples

<!doctype html>
<script>
function fnClone(){
   /* the 'true' possible value specifies to clone
      the childNodes as well.
   */
   var oCloneNode = document.getElementById("oList").cloneNode(true);
   /* When the cloned node is added,
   'oList' becomes a collection.
   */
   document.body.insertBefore(oCloneNode);
}
</script>
<ul id="oList">
<li>List node 1</li>
<li>List node 2</li>
<li>List node 3</li>
<li>List node 4</li>
</ul>
<input type="button" value="Clone List" onclick="fnClone()">

Usage

 Use this method to copy an node, its attributes and, if specified, its childNodes as well.

Notes

When you refer to the id of a cloned element, a collection is returned. cloneNodedoes not work on an IFRAME directly. You must call cloneNodethrough the all collection. The following example demonstrates how to call cloneNode on an iframe.

<!doctype html>

<html>

<script>
function fnBegin(){
    var fr = document.getElementByid("oFrame").cloneNode();
    console.log(document.body.innerHTML);
}
</script>
<body onload="fnBegin()">
    <iframe id="oFrame" src="about:blank"
        style="border:1px solid black; position:absolute; top:20px; left:30px;
            width:350px; height:300px;"></iframe>
</body>
</html>

If the object being cloned is an element and that element has expandos defined on it, the expandos are copied to the clone when cloneNode is called. Other browsers might handle this differently.

Related specifications

DOM Level 3 Core
Recommendation

Attributions