Haverá momentos em que você precisará adicionar ou remover nós do DOM e existem algumas Web APIs que você pode usar. Nesta lição, abordaremos os métodos appendChild() e removeChild(). O método appendChild() é usado para adicionar um nó ao final da lista de filhos de um nó pai especificado. Aqui está a sintaxe básica para o método appendChild():

parentNode.appendChild(newNode);

Vamos dar uma olhada em um exemplo para entender melhor como usar o método appendChild(). Neste exemplo, temos um elemento de lista não ordenada com um ID desserts dentro do HTML. Esta lista contém dois itens de lista de Cake e Pie:

<ul id="desserts">
  <li>Cake</li>
  <li>Pie</li>
</ul>

Para acessar essa lista dentro do arquivo JavaScript, podemos usar o método getElementById():

const dessertsList = document.getElementById("desserts");

Temos uma variável chamada dessertsList que armazena a referência para o elemento ul com o ID desserts. Então precisamos criar um novo elemento de item de lista usando o método createElement():

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");

O código a seguir criará um novo elemento de item de lista e o armazenará em uma variável chamada listItem. Para adicionar esse nó ao final da lista de filhos do elemento ul, podemos usar o método appendChild():

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");

dessertsList.appendChild(listItem);

Se você executar este código, verá que um novo elemento de item de lista é adicionado ao final da lista de filhos do elemento ul.

<ul id="desserts">
  <li>Cake</li>
  <li>Pie</li>
</ul>
<script src="index.js"></script>

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");

dessertsList.appendChild(listItem);

O problema é que o novo elemento de item da lista está vazio. Para adicionar conteúdo de texto ao novo elemento de item da lista, você pode usar a propriedade textContent:

<ul id="desserts">
  <li>Cake</li>
  <li>Pie</li>
</ul>
<script src="index.js"></script>

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");

listItem.textContent = "Cookies";
dessertsList.appendChild(listItem);

Agora a lista mostrará Cake, Pie e Cookies. Para remover um nó do DOM, você pode usar o método removeChild(). Aqui está a sintaxe básica para o método removeChild():

parentNode.removeChild(childNode);

Vamos dar uma olhada em um exemplo onde queremos remover aquele último elemento de parágrafo deste elemento section:

<section id="example-section">
  <h2>Example sub heading</h2>
  <p>first paragraph</p>
  <p>second paragraph</p>
</section>

Podemos acessar o elemento section dentro do arquivo JavaScript usando o método getElementById():

const sectionEl = document.getElementById("example-section");

Uma vez que temos a referência ao elemento section, podemos então acessar aquele último parágrafo usando o método querySelector():

const sectionEl = document.getElementById("example-section");
const lastParagraph = document.querySelector("#example-section p:last-of-type");

Estamos usando a pseudo-classe :last-of-type para selecionar o último elemento de parágrafo dentro do elemento section. Agora que temos os nós pai e filho, podemos remover o último elemento de parágrafo do elemento section usando o método removeChild():

<section id="example-section">
  <h2>Example sub heading</h2>
  <p>first paragraph</p>
  <p>second paragraph</p>
</section>
<script src="index.js"></script>

const sectionEl = document.getElementById("example-section");
const lastParagraph = document.querySelector("#example-section p:last-of-type");

sectionEl.removeChild(lastParagraph);

Então, quando você pode querer adicionar ou remover nós do DOM? Se você está trabalhando com conteúdo dinâmico, pode ser necessário adicionar ou remover nós do DOM. Exemplos do mundo real incluem carrinhos de compras, listas de tarefas e feeds de redes sociais.