Como clonar um elemento em JavaScript

Neste artigo você vai aprender a como clonar um elemento em JavaScript, com uma abordagem simples, utilizando recursos nativos da linguagem

Fala programador(a), beleza? Bora aprender mais sobre elementos e DOM em JavaScript!

Primeiramente é importante entender a parte conceitual da questão, como é possível clonar elementos?

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

É possível pois os elementos de HTML são adicionados a uma estrutura chamada DOM (Document Object Model), que o JavaScript tem acesso

Esta estrutura é basicamente a replicação das nossas tags em HTML

Então podemos a partir do JS criar elementos, alterar texto, adicionar eventos e também clonar elementos

A função utilizada para clonar um elemento é a cloneNode

Veja um exemplo de código para clonar um elemento com JS:

var elementoOriginal = document.querySelector("#teste");
var elementoClone = elementoOriginal.cloneNode(true);

// inserindo o elemento na paǵina
document.body.appendChild(elementoClone);

Na primeira linha selecionamos o elementos que queremos o clone, ou seja o original da cópia

Depois criamos o clone com o método cloneNode, perceba que devemos passar true como parâmetro

Pois este parâmetro determina se queremos fazer um deep clone, que geralmente é o mais indicado, copiando o elemento completamente

E por fim inserimos o elemento no body, porém você pode inserir aonde for necessário

Conclusão

Neste artigo vimos como clonar um elemento em JavaScript

Utilizamos o método cloneNode, que faz a cópia do elemento alvo

E então podemos inserir em qualquer local da página, como uma cópia independente do elemento original

Deixando o mesmo em seu local de origem, sem qualquer modificação

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube