Método cloneNode() do Elemento DOM HTML

Definição e uso

Método cloneNode() Método cria uma cópia do nó e retorna essa cópia.

Método cloneNode() Método clonar todos os atributos e seus valores.

Se você também quiser clonar os descendentes (filhos), defina o parâmetro deep como true.

Inserir de volta

Para inserir o nó clonado de volta no documento, use:

Método appendChild()

Método insertBefore()

Veja também:

Método adoptNode()

Método importNode()

Método createElement()

Método createTextNode()

Exemplo

Exemplo 1

Copie o elemento <li> do "myList2" para o "myList1":

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

Antes de clonar:

  • Café
  • Chá
  • Água
  • Leite

Depois de clonar:

  • Café
  • Chá
  • Leite
  • Água
  • Leite

Experimente você mesmo

Exemplo 2

Copie o elemento "demo", incluindo seus atributos e elementos filhos, e adicione-o ao documento:

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

Experimente você mesmo

Sintaxe

node.cloneNode(deep)

Parâmetro

Parâmetro Descrição
deep

Opcional.

  • false - Padrão. Apenas clonar nó e seus atributos
  • true - Clonar nó, seus atributos e descendentes

Retorno

Tipo Descrição
Objeto Node Nó clonado.

Suporte do navegador

element.cloneNode() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam completamente:

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