---
title: Node.cloneNode
slug: Web/API/Node/cloneNode
translation_of: Web/API/Node/cloneNode
---
<div>{{APIRef("DOM")}}</div>

<h2 id="Summary" name="Summary">Übersicht</h2>

<p>Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>);
</pre>

<dl>
 <dt><code>node</code></dt>
 <dd>Der Knoten, welcher dupliziert werden soll.</dd>
 <dt><code>dupNode</code></dt>
 <dd>Der duplizierte Knoten.</dd>
 <dt><code>deep</code></dt>
 <dd><code>true</code> wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, <code>false</code> wenn nur der Knoten dupliziert werden soll.</dd>
</dl>

<div class="note">
<p><strong>Hinweis:</strong> In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument <code>deep</code> optional. Es ist dann laut Spezifikation <strong><code>true</code></strong>.</p>

<p>Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun <strong><code>false</code></strong> ist. Auch wenn es immer noch optional ist, sollte man das Argument <code>deep</code> aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.</p>
</div>

<h2 id="Example" name="Example">Beispiel</h2>

<pre class="brush: js">    var p = document.getElementById("para1");
    var p_prime = p.cloneNode(true);
</pre>

<h2 id="Notes" name="Notes">Hinweise</h2>

<p id="not-event-listeners">Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> oder über die jeweilige Elementeigenschaft (z.B. <code>node.onclick = function</code>) gesetzt wurden. Im Fall eines <code>&lt;canvas&gt;</code>-Elements wird das gezeichnete Bild <em>nicht</em> mitkopiert.</p>

<p>Der mit <code>cloneNode()</code> duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.</p>

<p>Wenn <code>deep</code> auf <code>false</code> gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.</p>

<div class="warning"><strong>Warnung:</strong> Die Verwendung von <code>cloneNode()</code> kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.</div>

<p>Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das <code>name</code> Attribut überlegt werden.</p>

<p>Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.</p>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>deep</code> as an optional parameter</td>
   <td>
    <p>Ja</p>

    <p>(Standard: <code>false</code>)</p>
   </td>
   <td>{{CompatGeckoDesktop("13.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>
    <p>Yes</p>

    <p>(default is <code>false</code>)</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome für Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>deep</code> as an optional parameter</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("13.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Spezifikationen">Spezifikationen</h2>

<ul>
 <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
 <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
 <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (draft)</li>
</ul>