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>
**********************************************/