myNode.cloneNode( deep ) in DOM Level 2 Core
Return a new copy of the node.
Arguments
| name | type | description |
|---|---|---|
| deep | Boolean |
If true, recursiv
|
- Return Type
- Node
Description
This method creates a duplicate copy of the node upon which it was invoked. The new node has no parentNode (unless/until it is placed into the tree).
If deep is false, only the node itself will be duplicated; if it is true, all descendants of the node will also be duplicated.
<div id="header">
<div id="src">
<h1>Welcome</h1>
<p>Hello World!</p>
</div>
</div>
<div id="dest"></div>
Given the document fragment above, the following JS samples show the difference between not calling cloneNode and calling it with either value passed for deep.
Without cloneNode
var src = document.getElementById('src');
var dest = document.getElementById('dest');
dest.appendChild(src);
/** NEW DOCUMENT STRUCTURE *********************
<div id="header"></div>
<div id="dest">
<div id="src">
<h1>Welcome</h1>
<p>Hello World!</p>
</div>
</div>
**********************************************/
With cloneNode(false)
var src = document.getElementById('src');
var dest = document.getElementById('dest');
dest.appendChild( src.cloneNode(false) );
/** NEW DOCUMENT STRUCTURE *********************
<div id="header">
<div id="src">
<h1>Welcome</h1>
<p>Hello World!</p>
</div>
</div>
<div id="dest">
<div id="src"></div>
</div>
**********************************************/
With cloneNode(true)
var src = document.getElementById('src');
var dest = document.getElementById('dest');
dest.appendChild( src.cloneNode(true) );
/** NEW DOCUMENT STRUCTURE *********************
<div id="header">
<div id="src">
<h1>Welcome</h1>
<p>Hello World!</p>
</div>
</div>
<div id="dest">
<div id="src">
<h1>Welcome</h1>
<p>Hello World!</p>
</div>
</div>
**********************************************/