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.