Método cloneNode() del Elemento DOM HTML

Definición y uso

Método cloneNode() Método que crea una copia del nodo y devuelve esa copia.

Método cloneNode() Método que clona todos los atributos y sus valores.

Si también desea clonar los descendientes (hijos), configure el parámetro deep a true.

Insertar

Para insertar el nodo clonado de nuevo en el documento, utilice:

Método appendChild()

Método insertBefore()

Vea también:

Método adoptNode()

Método importNode()

Método createElement()

Método createTextNode()

Ejemplo

Ejemplo 1

Copia el elemento <li> desde "myList2" a "myList1":

const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

Antes de clonar:

  • Café
  • Té
  • Agua
  • Leche

Después de clonar:

  • Café
  • Té
  • Leche
  • Agua
  • Leche

Prueba por tu cuenta

Ejemplo 2

Copia el elemento "demo", incluyendo sus atributos y elementos hijos, y añádelo al documento:

const node = document.getElementById("demo");
const clone = node.cloneNode(true);
document.body.appendChild(clone);

Prueba por tu cuenta

Sintaxis

node.cloneNode(deep)

Parámetro

Parámetro Descripción
deep

Opcional.

  • false - Predeterminado. Solo clona el nodo y sus atributos
  • true - Clona el nodo, sus atributos y sus descendientes

Valor de retorno

Tipo Descripción
Objeto Node Nodo clonado.

Compatibilidad del navegador

element.cloneNode() es una característica de DOM Level 1 (1998).

Todos los navegadores lo admiten completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte