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

clonar um elemento em JavaScript capa

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?

É 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

Subscribe
Notify of
guest

2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pedro

Matheus, muito obrigado pela materia cara, não entendo nada absolutamente de nada de programação e dev, e estou com esse tipo de dificuldade.

Apliquei um Widget HTML da hotmart em meu site, porém gostaria de duplicar ele ao decorrer do site, porém somente copiando e colando ele não é exibido no decorrer da página, exibindo somente o primeiro WIDGET.

Uso o Wp+Elementor, como que eu poderia abrir o comando jss para fazer essa clonagem? Não faço ideia kkk, me perdoe.

Battisti

então Pedro, você pode adicionar algum plugin que injete código JavaScript, aí fica até mais fácil fazer esta alteração