Como mover um elemento para outro elemento em JavaScript

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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