---
title: Node.cloneNode()
slug: Web/API/Node/cloneNode
tags:
  - API
  - DOM
  - Referencia
  - Referência DOM
  - metodo
translation_of: Web/API/Node/cloneNode
---
<div>{{APIRef("DOM")}}</div>

<p>El método <strong><code>Node.cloneNode()</code></strong> devuelve un duplicado del nodo en el que este método fue llamado.</p>

<h2 id="Sintaxis">Sintaxis</h2>

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

<dl>
 <dt><em>node</em></dt>
 <dd>El nodo que se desea clonar.</dd>
 <dt><em>dupNode</em></dt>
 <dd>El nuevo nodo que será un clon de <code>node</code></dd>
 <dt><em>deep {{optional_inline}}</em></dt>
 <dd><code>true</code> si los hijos del nodo también deben ser clonados, o <code>false</code> para clonar únicamente al nodo.</dd>
</dl>

<div class="note">
<p><strong>Nota:</strong> En la especificación DOM4 (como se implementó en Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en <strong><code>true</code></strong>, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, <code>deep</code> debe establecerse en <code>false</code>.</p>

<p>Este comportamiento ha sido modificado en la última especificación, si es omitido, el método se comportará como si <code>deep</code> fuera <strong><code>false</code></strong>. Aunque sigue siendo opcional, usted siempre debería proporcionar el argumento <code>deep</code> tanto para la compatibilidad con las nuevas y anteriores especificaciones. Con Gecko 28.0 {{geckoRelease(28)}}),  la consola advierte a los desarrolladores a no omitir el argumento. Desde Gecko 29.0 {{geckoRelease(29)}}),  una copia superficial, es el comportamiento por defecto en lugar de una copia profunda.</p>
</div>

<h2 id="Ejemplo">Ejemplo</h2>

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

<h2 id="Notas">Notas</h2>

<p id="not-event-listeners">Al clonar un nodo se copian todos sus atributos y valores, incluyendo escuchadores intrínsecos (en–línea). No copia los escuchadores de evento añadidos utilizando <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> o aquellos asignados a las propiedades de un elemento. (ej. <code>node.onclick = fn</code>). Además, para un elemento <code>&lt;canvas&gt;</code>, la imagen pintada no se copia.</p>

<p>El nodo duplicado devuelto por <code>cloneNode()</code> no formará parte del documento hasta que sea añadido a otro nodo que sea parte del documento utilizando {{domxref("Node.appendChild()")}} o un método similar. Tampoco tiene padre hasta que sea añadido a otro nodo.</p>

<p>Si <code>deep</code> se establece a <code>false</code>, los elementos hijos no se clonan. Tampoco se clona ningún texto que contenga el nodo, ya que está contenido en uno o más nodos {{domxref("Text")}}.</p>

<p>Si <code>deep</code> se evalúa a <code>true</code>, el subárbol completo (incluyendo texto que pueda estar en nodos {{domxref("Text")}} hijos) también se copian. En los nodos vacíos (por ejemplo, los elementos {{HTMLElement("img")}} y {{HTMLElement("input")}}) no importa si <code>deep</code> es <code>true</code> o <code>false</code>.</p>

<div class="warning"><strong>Advertencia:</strong> <code>cloneNode()</code> puede conducir a elementos con ID's duplicados en el documento.</div>

<p>Si el nodo original tiene un ID el elemento clonado se ubicará en el mismo documento, el ID del clon debería ser modificado para ser único. Los atributos name pueden necesitar ser modificados también, dependiendo de si se esperan nombres duplicados.</p>

<p>Para clonar un nodo con el fin de agregarlo a un domento distinto, utiliza {{domxref("Document.importNode()")}}.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
   <td>{{Spec2("DOM3 Core")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
   <td>{{Spec2("DOM2 Core")}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>

<div>
<p>{{Compat("api.Node.cloneNode")}}</p>
</div>