myNode.cloneNode( deep ) in DOM Level 2 Core

Return a new copy of the node.

Arguments

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