Mover elemento em JavaScript

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.

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Artigo relacionado - JavaScript DOM

  • Criar tabela usando JavaScript
  • JavaScript anexar dados ao Div
  • Ocultar / mostrar elementos de JavaScript
  • JavaScript DOM pronto
  • Ativar / desativar botão de entrada usando JavaScript