14

Há possibilidade de obter um clone exato de um determinado elemento HTML? de forma que o clone contenha todas as propriedades exatamente iguais?

Se houver, gostaria de saber como proceder para realizar este clone, e também entender como o mesmo estaria agindo, de que forma ele estaria clonando, ou seja uma teoria mais conceitual abrangendo acerca do clone em si.

4
  • Possível duplicata: pt.stackoverflow.com/questions/857/…
    – user622
    Commented 5/02/2014 às 17:09
  • Com certeza não é uma duplicata @GabrielSantos. Não vejo nenhum conteúdo relacionado aqui com lá. Preste atenção no contexto e verás que são coisas diferentes. Commented 5/02/2014 às 17:22
  • Desculpe. Foi um equívoco.
    – user622
    Commented 5/02/2014 às 20:02
  • Magina, @GabrielSantos, está tudo bem. Fique à vontade para cumprir seu papel de sinalizar questões duplicadas :) Commented 5/02/2014 às 20:03

2 Respostas 2

11

Respondendo a pergunta: Sim, há possibilidade de obter um clone, utilizando javascript nativo, que seria, ou não(você jájá vai saber porque) um clone fiel exatamente igual contendo todas as propriedades do elemento clonado.

Conceito/Explicação: Os elementos HTML em seu formato como você pode ver, como código HTML entre tags, eles não são só isso. Cada elemento é um Node, que está armazenado dentro do DOM(Document Object Model) onde lá estariam contidos todas as informações, funções disponíveis para uso, referência, atributos, valores, dentre outros, resumindo, tudo que um elemento é, está armazenado no DOM, sem ele não seriamos capazes de acessar as propriedades dos elementos diretamente. Por isso para obter uma cópia idêntica e exata de outro elemento, podemos clonar o Node dele, desta forma estaríamos clonando o que ele é.

Informações/Exemplos/Prática: Cada Node possui uma função nativa do Javascript chamada cloneNode(), onde agora eu explico porque eu disse "ou não" logo no início sobre fazer um clone fiel, que seria no caso o parâmetro deep da função cloneNode(), que é um parâmetro requerido, ou seja, você tem de informa-lo, vamos conhecer esta função:

cloneNode([deep])

Argumentos

deep (Boolean) required

Se verdadeiro(true), duplica a sub-árvore do Node como se fosse ele mesmo.

Se falso(false), apenas copia o nó (e seus atributos, caso ele for um elemento).

Descrição

Cria uma cópia(duplicata) deste Node, incluindo todos os atributos, e seus respectivos valores, e atributos, inclusive aqueles que não estão definidos porém contém um valor padrão(default) no DOM. O Node duplicado, não há um Pai(parent), ou seja, o parentNode é nulo, apenas enquanto você não inclui ele no documento, como por exemplo usando appendChild.

Porém, caso o argumento deep seja verdadeiro(true), logo a sub-arvore do Node também será duplicada.

Informações Adicionais

Ao clonar uma sub-árvore que está como readonly(somente leitura), resultaria em uma sub-arvore que não pode ser modificada.

Os atributos do Node do elemento, ao ser clonado, também são copiados, incluindo os atributos padrão(default), porém o texto do elemento não é copiado, apenas se o argumento deep é verdadeiro(true).

Atenção, Informação importante sobre Eventos(creditos ao @bfavaretto):

O Clone não irá ter os eventos do elemento clonado, se você o atribuiu como propriedade ou com addEventListener (métodos mais recomendados, aliás), o unico modo que funciona clonagem com eventos é quando o evento está inline ou seja: <div onclick=alert('foo')> por exemplo.

Caso queira entender melhor, há um exemplo Aqui

Valor de Retorno:

O Node duplicado(clonado).

Bom, agora que já conhecemos a função, vamos a prática:

Testando com deep clone (parâmetro deep = true):

Obs: Por favor, utilize um elemento que tenha filhos para melhor entendimento.

var seuNode = document.getElementById('IDdoElementoQueTemFilhos'); //usei getElementById() por opção você pode resgatar a referência do seu node como quiser.
var clone   = seuNode.cloneNode(true); //aqui você terá seu clone armazenado em variável mas ainda não incluido no Documento, sem parentNode.
document.body.appendChild(clone); //você pode dar append onde quiser, utilizei o body.

Testando com apenas clone (parâmetro deep = false):

var seuNode = document.getElementById('IDdoElementoQueTemFilhos'); //usei getElementById() por opção você pode resgatar a referência do seu node como quiser.
var clone   = seuNode.cloneNode(false); //aqui você terá seu clone armazenado em variável mas ainda não incluido no Documento, sem parentNode.
document.body.appendChild(clone); //você pode dar append onde quiser, utilizei o body.

Note que para o exemplo 1, você obteve o clone dele completo, incluindo os filhos que ele tem, ou seja, a sub-árvore dele.

Já para o exemplo 2, você só obteve o clone do isolado elemento, apenas ele, sem obter a cópia dos filhos também(sub-árvore).

Dependendo do seu uso você poderá alternar entre os dois métodos de clonar. Também há outras maneiras até utilizando o .clone() do jQuery, porém, eu considero melhor utilizar esta maneira que tem fidelidade do clone de um Node e é javascript nativo, não necessitando de plugins externos.

5
  • 2
    Visualmente, ótimo, o cloneNode resolve. Mas cuidado, porque ele não copia eventos atribuídos aos elementos clonados.
    – bfavaretto
    Commented 5/02/2014 às 21:50
  • Tem certeza @bfavaretto ? realizei esse teste agora mesmo e obtive sucesso em clonar com evento também, veja você mesmo jsfiddle.net/9Aja7 Commented 5/02/2014 às 22:33
  • Funciona nesse caso porque você passou o listener inline, como atributo. Se você atribuir como propriedade ou com addEventListener (métodos mais recomendados, aliás), o evento não é clonado. jsfiddle.net/9Aja7/1
    – bfavaretto
    Commented 5/02/2014 às 22:41
  • Que triste @bfavaretto, isso me desanimou um pouco, mas pelo menos isso é uma informação importante que vou adicionar à resposta. Commented 5/02/2014 às 22:49
  • Entendo o desânimo... Até porque contornar isso não é tão simples no caso do addEventListener. O jQuery consegue porque abstrai totalmente essa parte de eventos, então mantém uma lista dos eventos de todo mundo.
    – bfavaretto
    Commented 6/02/2014 às 2:12
3

No jQuery existe o método jQuery.clone que permite clonar elementos (com ou sem seus respectivos eventos)

Considere o seguinte exemplo

Estrutura HTML

<div class="wrapper">
    <div class="exemplo">Uma div</div>
</div>

Código Javascript

// Evento simples de clique
$('.exemplo').on('click', function() {
    alert('Evento click');
});

// Clona o elemento com classe "exemplo"
var $clone = $('.exemplo').clone();

// Clona o elemento com classe "exemplo" juntamente com seus eventos
var $cloneComEventos = $('.exemplo').clone(true);

// Adiciona os elementos clonados no elemento wrapper
$('.wrapper').append($clone);
$('.wrapper').append($cloneComEventos);

O elemento wrapper possuirá um total de 3 elementos, sendo que o primeiro (original) e terceiro (sua cópia) possuirão eventos click

Em prática: http://jsfiddle.net/wTdg2/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .