Mover elemento em JavaScript
Este tutorial discutirá como mover os filhos de um elemento para outro pai usando a função appendChild() em JavaScript.
Mova os filhos de um elemento para outro pai usando a função appendChild() em JavaScript
Podemos usar a função appendChild() para mover os filhos de um elemento para outro pai em JavaScript. A função appendChild() adiciona um filho ao pai fornecido. Em primeiro lugar, temos que obter os elementos no JavaScript, o que podemos fazer usando a função getElementById() ou querySelector(). Depois disso, se houver mais de um filho, temos que usar um loop para mover cada filho para o pai fornecido. O loop adicionará todos os filhos um por um e terminará quando não houver mais filhos para adicionar ao pai. Por exemplo, vamos criar dois elementos com alguns filhos e mover os filhos de um elemento para outro usando a função appendChild(). Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="First Parent Element"></div>
<div id="Second Parent Element">
<span>Hello World</span>
</div>
</body>
<script type="text/javascript">
var FirstParent = document.getElementById('First Parent Element');
var SecondParent = document.getElementById('Second Parent Element');
while (SecondParent.childNodes.length > 0) {
FirstParent.appendChild(SecondParent.childNodes[0]);
}
console.log(FirstParent.childNodes)
</script>
</html>
Produção:
NodeList(3) [text, span, text]
No código acima, o primeiro elemento pai não tem nenhum filho e o segundo elemento pai tem um filho. Como você pode ver na saída, o primeiro elemento pai também tem o mesmo filho que o segundo elemento pai após o loop. Usamos a função console.log() para exibir os filhos do primeiro elemento pai. Você também pode converter esse código em uma função, para que não precise escrever o código inteiro novamente. Por exemplo, vamos transformar o código acima em uma função que aceitará dois parâmetros de string contendo o id dos dois elementos pais. A função adicionará os filhos do segundo argumento ao pai do primeiro argumento. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="First Parent Element"></div>
<div id="Second Parent Element">
<span>Hello World</span>
</div>
</body>
<script type="text/javascript">
function MoveChildren(first, second){
var FirstParent = document.getElementById(first);
var SecondParent = document.getElementById(second);
while (SecondParent.childNodes.length > 0) {
FirstParent.appendChild(SecondParent.childNodes[0]);
}
}
MoveChildren('First Parent Element','Second Parent Element');
console.log(document.getElementById('First Parent Element').childNodes)
</script>
</html>
Produção:
NodeList(3) [text, span, text]
Agora, você pode usar esta função sempre que quiser mover os filhos de um elemento para os pais de outro elemento.
