Neste artigo você vai aprender a mover um elemento para outro elemento em JavaScript puro, de uma maneira super simples e fácil!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript, DOM e atualização de elementos!
Para resolver este problema vamos utilizar o método appendChild de JavaScript
Este método quer um elemento de destino e também o elemento que vamos mover a ele
Então vamos criar um HTML básico:
<div class="container"></div> <p class="paragrafo">Mover este elemento</p>
A intenção neste caso é colocar o parágrafo na div com classe de container
Então vamos ao JavaScript necessário:
var p = document.querySelector(".paragrafo");
var container = document.querySelector(".container");
container.appendChild(p);No exemplo acima selecionamos os dois elementos, primeiramente o que queremos mover na variável p
E depois o container, que vai ter um elemento inserido, que é a div
Após a seleção utilizamos o método appendChild em container, que é a div que vai receber os elementos
O método exige um argumento que é o elemento a ser movido, neste caso inserimos a variável p
E deste modo temos o parágrafo movido para dentro da div!
Conclusão
Neste artigo você aprendeu a como mover um elemento para outro elemento utilizando JavaScript
O método escolhido foi o appendChild, que requer um container para inserir os elementos e depois o elemento alvo, que será movido
Desta maneira fizemos o uso em uma div, como container, e um parágrafo como elemento alvo
Inserindo o parágrafo dentro da div alvo
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube