O método .clone() realiza uma cópia profunda do conjunto de elementos combinados, o que significa que copia os elementos combinados bem como todos os seus elementos descendentes e nós de texto.
Nota: Por razões de desempenho, o estado dinâmico de certos elementos da forma (por exemplo dados do utilizador digitados em textarea e as selecções do utilizador feitas em select) não são copiados para os elementos clonados. Ao clonar input elementos, o estado dinâmico do elemento (por exemplo, dados do utilizador digitados em entradas de texto e selecções do utilizador efectuadas numa caixa de verificação) é retido nos elementos clonados.
Quando utilizado em conjunto com um dos métodos de inserção, .clone() é uma forma conveniente de duplicar elementos numa página. Considere o seguinte HTML:
|
1
2
3
4
|
|
Como mostrado na discussão para .append(), normalmente quando um elemento é inserido algures no DOM, ele é deslocado do seu antigo local. Assim, dado o código:
|
1
|
|
A estrutura DOM resultante seria
|
1
2
3
4
5
6
|
|
Para evitar isto e em vez disso criar uma cópia do elemento, poderia escrever o seguinte:
|
1
|
|
Esta produziria:
|
1
2
3
4
5
6
7
|
|
Nota: Ao utilizar o método .clone(), pode modificar os elementos clonados ou o seu conteúdo antes de os (re)inserir no documento.
Normalmente, quaisquer manipuladores de eventos ligados ao elemento original não são copiados para o clone. O parâmetro opcional withDataAndEvents permite-nos alterar este comportamento, e em vez disso fazer cópias de todos os manipuladores de eventos também, vinculados à nova cópia do elemento. A partir de jQuery 1.4, todos os dados do elemento (anexados pelo parâmetro .data()) são também copiados para a nova cópia.
No entanto, os objectos e matrizes dentro dos dados do elemento não são copiados e continuarão a ser partilhados entre o elemento clonado e o elemento original. Para copiar em profundidade todos os dados, copie cada um manualmente:
|
1
2
3
4
5
|
|
As de jQuery 1.5, withDataAndEvents pode ser opcionalmente melhorado com deepWithDataAndEvents para copiar os eventos e dados para todas as crianças do elemento clonado.
Nota: Usando .clone() tem o efeito secundário de produzir elementos com duplicado id atributos, que supostamente são únicos. Sempre que possível, recomenda-se evitar clonar elementos com este atributo ou utilizar class atributos como identificadores.
atributos como identificadores