Node.cloneNode()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 Opcional
-
true
si los hijos del nodo también deben ser clonados, ofalse
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
Specification |
---|
DOM Standard # ref-for-dom-node-clonenode① |
Compatibilidad con navegadores
BCD tables only load in the browser