El método Node.cloneNode() devuelve un duplicado del nodo en el que este método fue llamado.

Sintaxis

var dupNode = node.cloneNode(deep);
node
El nodo que se desea clonar.
dupNode
El nuevo nodo que será un clon de node
deep Optional
true si los hijos del nodo también deben ser clonados, o false para clonar únicamente al nodo.

Nota: En la especificación DOM4 (como se implementó en Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), deep es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en true, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, deep debe establecerse en false.

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

Ejemplo

var p = document.getElementById("para1");
var p_prime = p.cloneNode(true);

Notas

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 addEventListener() o aquellos asignados a las propiedades de un elemento. (ej. node.onclick = fn). Además, para un elemento <canvas>, la imagen pintada no se copia.

El nodo duplicado devuelto por cloneNode() no formará parte del documento hasta que sea añadido a otro nodo que sea parte del documento utilizando Node.appendChild() o un método similar. Tampoco tiene padre hasta que sea añadido a otro nodo.

Si deep se establece a false, 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 Text.

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

Advertencia: cloneNode() puede conducir a elementos con ID's duplicados en el documento.

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.

Para clonar un nodo con el fin de agregarlo a un domento distinto, utiliza Document.importNode().

Especificaciones

Especificación Estado Comentario
DOM
La definición de 'Node.cloneNode()' en esta especificación.
Living Standard  
Document Object Model (DOM) Level 3 Core Specification
La definición de 'Node.cloneNode()' en esta especificación.
Obsolete  
Document Object Model (DOM) Level 2 Core Specification
La definición de 'Node.cloneNode()' en esta especificación.
Obsolete Definición inicial

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android ?
deep defaults to falseChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 29
Soporte completo 29
Sin soporte 13 — 29
Notas
Notas deep defaults to true.
Sin soporte No
Notas
Notas Before Firefox 13, deep was a required parameter.
IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 29
Soporte completo 29
Sin soporte 14 — 29
Notas
Notas deep defaults to true.
Sin soporte No
Notas
Notas Before Firefox 14, deep was a required parameter.
Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.

Etiquetas y colaboradores del documento

Colaboradores en esta página: AlePerez92, jyorch2, fewrare
Última actualización por: AlePerez92,