Inserir, substituir ou remover elementos filho em JavaScript

Neste tutorial, aprenderemos sobre alguns métodos importantes que você pode usar para inserir, remover ou substituir facilmente elementos filhos em JavaScript.

Inserindo Elementos Filhos

Um elemento filho pode ser inserido no início, no final ou em algum lugar entre todos os outros filhos de um pai. Nesta seção, mostrarei como inserir um elemento filho em qualquer um dos locais desejados com facilidade.

Inserir um elemento filho no final

Geralmente, quando você precisa inserir elementos filho, eles devem ser adicionados no final da lista depois de todos os outros filhos. O appendChild() método funciona melhor neste caso. Este método retorna o nó recém-anexado como seu valor.

Se o filho que você deseja anexar já existir no documento, esse método o moverá de sua posição atual e o colocará na nova posição.

Começaremos com a seguinte lista de frutas:

1

2

  
Papaya

3

  
Mango

4

  
Banana

5

  
Apple

6

  
Guava

7

Nós usaremos o appendChild() método para adicionar uma nova fruta ao final da lista. Depois disso, moveremos a fruta do topo da lista para o final usando o mesmo método.

1

let fruit_list = document.querySelector("ol");

2

let first_fruit = document.querySelector("li");

3

let new_fruit = document.createElement("li");

4

5

new_fruit.textContent = "Lichi";

6

7

// "Lichi" is added at the bottom.

8

fruit_list.appendChild(new_fruit);

9

10

// "Papaya" is moved to the bottom.

11

fruit_list.appendChild(first_fruit);

Como mencionei anteriormente, usando appendChild() anexar um nó existente moverá o nó para seu local original para a nova posição. Isso é exatamente o que acontece com a primeira fruta da nossa lista quando ela é movida para o final. O HTML final ficará assim:

1

2

    
Mango

3

    
Banana

4

    
Apple

5

    
Guava

6

    
Lichi

7

    
Papaya

8

Inserindo um elemento filho antes ou depois de um nó específico

E se você não quiser adicionar elementos ao final da lista, mas antes ou depois de um determinado elemento? Por exemplo, você pode querer adicionar lichi à lista antes ou depois Banana.

Adicionar um elemento filho antes de um nó específico é fácil com a ajuda do insertBefore() método. Aceita dois parâmetros. O primeiro é o nó filho que você deseja inserir. O segundo é o nó antes do qual você deseja inserir o nó filho.

É importante lembrar que este método requer ambos os parâmetros para funcionar. No entanto, você pode definir o valor do segundo parâmetro como nulo para adicionar o novo nó no final da lista.

Vamos usar este método para inserir um nó antes do terceiro elemento da lista, Banana. O JavaScript ficará mais ou menos assim:

1

let fruit_list = document.querySelector("ol");

2

let third_fruit = document.querySelectorAll("li")[2];

3

let new_fruit = document.createElement("li");

4

5

new_fruit.textContent = "Lichi";

6

7

// Adds "Lichi" before "Banana"

8

fruit_list.insertBefore(new_fruit, third_fruit);

Usando a seguinte linha irá adicionar lichi no final da lista.

1

fruit_list.insertBefore(new_fruit, null);

Não existe um método semelhante ao insertBefore() que você pode usar para inserir um elemento filho após um nó específico. No entanto, podemos emular o mesmo comportamento com a ajuda do nextSibling propriedade de um nó DOM.

1

let fruit_list = document.querySelector("ol");

2

let third_fruit = document.querySelectorAll("li")[2];

3

let new_fruit = document.createElement("li");

4

5

new_fruit.textContent = "Lichi";

6

7

fruit_list.insertBefore(new_fruit, third_fruit.nextSibling);

8

/*

9

10

  
Papaya

11

  
Mango

12

  
Banana
Lichi

13

  
Apple

14

  
Guava

15

16

*/

Uma coisa importante a lembrar aqui é que os navegadores inserem nós de texto em seus documentos para representar espaços em branco. Como resultado, usando o nextSibling propriedade geralmente lhe dará de volta este nó. Você pode usar o nextElementSibling propriedade se você quiser se referir ao nó do elemento real.

1

let fruit_list = document.querySelector("ol");

2

let third_fruit = document.querySelectorAll("li")[2];

3

let new_fruit = document.createElement("li");

4

5

new_fruit.textContent = "Lichi";

6

7

// #text "n  "

8

console.log(third_fruit.nextSibling);

9

10

// 

11

console.log(third_fruit.nextElementSibling);

12

13

fruit_list.insertBefore(new_fruit, third_fruit.nextElementSibling);

14

/*

15

16

  
Papaya

17

  
Mango

18

  
Banana

19

  
Lichi
Apple

20

  
Guava

21

22

*/

Inserir um elemento filho no início

Também podemos usar o insertBefore() para inserir um elemento filho como o primeiro filho do pai. Isso requer o uso do firstChild propriedade. Usamos o nó filho retornado pelo firstChild propriedade como o segundo parâmetro para o insertBefore() método e nosso novo nó é inserido antes do primeiro filho original, que agora se tornará o segundo filho.

Aqui está um exemplo:

1

let fruit_list = document.querySelector("ol");

2

let new_fruit = document.createElement("li");

3

4

new_fruit.textContent = "Lichi";

5

6

fruit_list.insertBefore(new_fruit, fruit_list.firstChild);

7

/*

8

9

    
Lichi

10

    
Papaya

11

    
Mango

12

    
Banana

13

    
Apple

14

    
Guava

15

16

*/

Substituir Elementos Filhos

Você pode usar o replaceChild() método se desejar substituir um nó filho por um novo nó em um pai. Este método também aceita dois parâmetros. O primeiro parâmetro é o nó de substituição, enquanto o segundo parâmetro é o nó antigo que você deseja substituir.

1

let fruit_list = document.querySelector("ol");

2

let third_fruit = document.querySelectorAll("li")[2];

3

let new_fruit = document.createElement("li");

4

5

new_fruit.textContent = "Lichi";

6

7

fruit_list.replaceChild(new_fruit, third_fruit);

8

/*

9

10

  
Papaya

11

  
Mango

12

  
Lichi

13

  
Apple

14

  
Guava

15

16

*/

Digamos que o nó substituto já exista em algum lugar do DOM. Nesse caso, ele será primeiro removido de seu local original antes de ser usado como substituto.

1

let fruit_list = document.querySelector("ol");

2

let first_fruit = document.querySelector("li");

3

let last_fruit = document.querySelector("ol").lastChild;

4

5

fruit_list.replaceChild(first_fruit, last_fruit);

6

/*

7

8

  
Mango

9

  
Banana

10

  
Apple

11

  
Guava

12

  
Papaya

13

14

*/

Remover Elementos Filhos

A remoção de elementos filhos de um nó DOM também é relativamente fácil devido à removeChild() método. Este método aceita um único parâmetro que se refere ao nó filho que você deseja remover. O valor de retorno desse método é o nó removido.

Vamos usar este método para remover uma fruta da nossa lista que foi comida por alguém.

1

let fruit_list = document.querySelector("ol");

2

let third_fruit = document.querySelectorAll("li")[2];

3

4

fruit_list.removeChild(third_fruit);

5

/*

6

7

  
Papaya

8

  
Mango

9

  
Apple

10

  
Guava

11

12

*/

Contanto que você tenha uma referência ao filho removido em seu código, você pode adicioná-lo de volta ao DOM conforme mostrado abaixo ou reutilizá-lo de uma maneira diferente. Caso contrário, o elemento removido será apagado da memória após um curto período de tempo.

O código a seguir adicionará a banana ao final de nossa lista.

1

let fruit_list = document.querySelector("ol");

2

let third_fruit = document.querySelectorAll("li")[2];

3

4

fruit_list.removeChild(third_fruit);

5

fruit_list.appendChild(third_fruit);

6

7

/*

8

9

  
Papaya

10

  
Mango

11

  
Apple

12

  
Guava

13

  
Banana

14

Pensamentos finais

Neste tutorial, aprendemos como inserir, substituir ou remover elementos filhos de um pai usando JavaScript puro. JavaScript fornece o replaceChild() e removeChild() métodos para fazer facilmente substituições e remoções. As inserções também são muito fáceis com a ajuda do insertBefore() método, mas você tem que ficar um pouco esperto com sua abordagem se quiser usar o método para inserir seu elemento depois de um filho específico ou como o primeiro filho.