29.01.2025

Copiando um DIV para Outro DIV Usando jQuery

Resposta Rápida

// Clonado! 🐑
$('.source').clone().appendTo('.target');

O trecho de código acima utiliza jQuery para copiar um DIV com a classe .source e coloca-lo dentro de um DIV com a classe .target. Isso cria uma duplicata exata do elemento.

Para garantir que as operações do DOM sejam realizadas apenas após os elementos estarem completamente carregados, certifique-se de envolver seu código em $(function() { /* seu código jQuery */ });.

Detalhes da Função .clone()

Visão Geral da .clone()

A função .clone() no jQuery cria uma cópia completa dos elementos selecionados, incluindo seus nós filhos, texto e atributos como classes e IDs. Para copiar elementos sem seus dados e eventos associados, use .clone(false). Isso é análogo aos comandos CTRL+C e CTRL+V!

Clonagem e Uso de Seletores

Para selecionar elementos de forma mais precisa, aplique os seletores jQuery apropriados. Se a classe .source aparecer em outros lugares, adicione um seletor pai ou uma classe adicional para maior especificidade.

Métodos para Colocar Clones

O método .appendTo() insere elementos clonados no final do DIV com a classe target. Para ter mais controle sobre a colocação dos clones, use as funções .prependTo(), .insertBefore() e .insertAfter().

Visualização

Imagine que você quer mover um gadget (🔌) de um cômodo para outro.

Sala de estar tem: 🔌 
Quarto tem: nenhum 🔌

Com jQuery, isso pode ser feito tão facilmente quanto se você tivesse uma vara mágica 🪄.

$('#quarto').append($('#salaDeEstar .gadget').clone());

Agora os gadgets estão tanto na sala de estar quanto no quarto:

Sala de estar: 🔌
Quarto: Voilà! 🔌

E não precisa de impressora 3D!

Clonagem Avançada e Mais

Excluindo Elementos ao Clonar

Às vezes você precisa clonar um DIV sem certos elementos. Para isso, use o método .not():

$('.source').clone().not('.exclude').appendTo('.target');

Dessa forma, um clone do DIV será criado sem os elementos com a classe .exclude.

Clonando Vários DIVs

Se você precisar copiar vários elementos, use os métodos .each() e .clone() juntos:

$('.source').each(function() {
  // Isso lhe dá clones idênticos!
  $(this).clone().appendTo('.target');
});

Particularidades de Copiar Elementos de Formulário

Ao trabalhar com elementos de formulário para evitar IDs e valores duplicados, limpe os campos usando .val(''):

$('.source').clone().find(':input').val('').end().appendTo('.target');

Isso permite que você crie muitos formulários sem confusão de dados.

Tenha Cuidado, Existem Armadilhas!

Manipuladores de Eventos

Não se esqueça de reanexar manipuladores de eventos aos clones caso estejam presentes nos elementos originais:

$('.source').clone(true).appendTo('.target').on('click.myNamespace', function() {
  // Sua interatividade não será desperdiçada!
});

Performance

Clonar estruturas grandes pode reduzir a performance. Procure otimizar seletores e minimizar o uso de .clone().

Exclusividade de IDs

Após a clonagem, a exclusividade dos IDs desempenha um papel crucial na estabilidade da página. Garanta que os elementos clonados tenham IDs únicos.

Recursos Úteis

1. .clone() | Documentação da API jQuery — para uma compreensão aprofundada do processo de clonagem usando jQuery.
2. .append() | Documentação da API jQuery — para explorar como inserir elementos DOM.
3. :last-child | CSS-Tricks — sobre o uso do seletor CSS :last-child.
4. Node: método cloneNode() - Web APIs | MDN — sobre métodos alternativos para clonar nós sem usar jQuery.
5. jQuery Adicionar Elementos — um guia para adicionar e clonar elementos usando jQuery.

Video

Navigation