Como Criar, Substituir e Remover Elementos do DOM com JavaScript

O JavaScript oferece uma série de métodos para gerenciar elementos em uma página web. Especificamente, podemos criar e adicionar novos elementos ou substituir e remover os já existentes. Vamos examinar esses métodos.

Criando Elementos

Para criar elementos, o objeto document possui os seguintes métodos:

createElement(elementName): cria um elemento HTML, cuja tag é passada como parâmetro. Retorna o elemento criado.
createTextNode(text): cria e retorna um nó de texto. O texto do nó é passado como parâmetro.

Vamos criar um elemento usando createElement:

const header = document.createElement("h1"); // cria um cabeçalho <h1>
console.log(header); // <h1></h1>

Assim, a variável header armazena uma referência ao elemento h1.

Criemos um nó de texto usando createTextNode:

const headerText = document.createTextNode("Hello World"); // cria um nó de texto
console.log(headerText); // "Hello World"

Adicionando Elementos

No entanto, criar elementos não é suficiente; eles também precisam ser adicionados à página web.

Para adicionar elementos, podemos usar um dos métodos do objeto Node:

appendChild(newNode): adiciona o novo nó newNode ao final da coleção de nós filhos.
insertBefore(newNode, referenceNode): adiciona o novo nó newNode antes do nó referenceNode.

appendChild

Utilizemos o método appendChild():

const header = document.createElement("h1"); // cria um cabeçalho <h1>
const headerText = document.createTextNode("Hello World"); // cria um nó de texto
header.appendChild(headerText); // adiciona o nó de texto ao elemento h1
console.log(header); // <h1>Hello World</h1>

E para adicionar o elemento criado à página, devemos adicioná-lo a um elemento já existente na página:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      const header = document.createElement("h1");
      const headerText = document.createTextNode("Hello World");
      header.appendChild(headerText);
      document.body.appendChild(header); // adiciona o elemento h1 ao elemento body
    </script>
  </body>
</html>

Primeiro criamos um elemento de cabeçalho comum h1 e um nó de texto. Em seguida, adicionamos o nó de texto ao elemento de cabeçalho. Depois, adicionamos o cabeçalho ao elemento body:

Adicionando um elemento à página web em JavaScript

Vale ressaltar que não é necessário criar um nó de texto adicional para definir o texto dentro de um elemento, pois podemos usar a propriedade textContent e atribuir diretamente o texto a ele:

const header = document.createElement("h1");
header.textContent = "Hello World"; // define o texto do elemento

Neste caso, o nó de texto é criado implicitamente quando o texto é definido.

insertBefore

O método appendChild() adiciona um elemento ao final do contêiner. Para especificar um local mais preciso para adicionar, podemos usar outro método, insertBefore(), que adiciona um elemento antes de outro elemento. Por exemplo, se queremos adicionar um cabeçalho antes do primeiro parágrafo na página:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <p>Texto 1</p>
    <p>Texto 2</p>
    <script>
      const header = document.createElement("h1");
      header.textContent = "Cabeçalho da Página"; // define o texto do elemento
      const firstP = document.body.firstElementChild; // obtém o primeiro parágrafo
      document.body.insertBefore(header, firstP); // adiciona o elemento h1 antes do primeiro parágrafo
    </script>
  </body>
</html>

Adicionando um elemento à página web em JavaScript usando o método insertBefore

Se precisarmos inserir um novo nó na segunda, terceira ou qualquer outra posição, precisaremos encontrar o nó antes do qual queremos inserir, usando combinações das propriedades firstElementChild/lastElementChild e nextSibling/previousSibling.

Copiando Elementos

Às vezes, os elementos podem ser bastante complexos, e é muito mais fácil copiá-los do que recriar seu conteúdo usando chamadas separadas. Para copiar nós já existentes, o objeto Node pode utilizar o método cloneNode():

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div id="article">
      <h1>Página Inicial</h1>
      <p>Texto 1</p>
      <p>Texto 2</p>
    </div>
    <script>
      const article = document.getElementById("article");
      // obtém o último parágrafo
      const lastP = article.lastElementChild;
      // clona o elemento lastP
      const newLastP = lastP.cloneNode(true);
      // altera o texto
      newLastP.textContent = "Data de Publicação: 28/10/2023";
      // adiciona ao final do elemento article
      article.appendChild(newLastP);
    </script>
  </body>
</html>

No método cloneNode(), um valor booleano é passado como parâmetro: se true, o elemento é copiado com todos os seus nós filhos; se false, é copiado sem os nós filhos. Neste caso, estamos copiando o nó com todo o seu conteúdo e depois adicionando ao final do elemento com o id "article".

Clonando elementos da página web em JavaScript

Substituindo Elementos

Para substituir um elemento, é utilizado o método replaceChild(newNode, oldNode) do objeto Node. Este método toma como primeiro parâmetro o novo elemento, que substituirá o antigo elemento oldNode, fornecido como segundo parâmetro.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div id="article">
      <p>Página Inicial</p>
      <p>Texto 1</p>
      <p>Texto 2</p>
    </div>
    <script>
      const article = document.getElementById("article");
      // encontra o nó que será substituído
      // vamos considerar que seja o primeiro elemento
      const oldNode = article.firstElementChild;
      // cria um novo elemento
      const newNode = document.createElement("h2");
      // define o texto para ele
      newNode.textContent = "Hello World";
      // substitui o antigo nó pelo novo
      article.replaceChild(newNode, oldNode);
    </script>
  </body>
</html>

Neste caso, substituímos o primeiro elemento, que é um parágrafo, por um cabeçalho h2.

Clonando elementos da página web em JavaScript

Removendo Elementos

Para remover um elemento, é utilizado o método removeChild() do objeto Node. Este método remove um dos nós filhos:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div id="article">
      <h1>Página Inicial</h1>
      <p>Texto 1</p>
      <p>Texto 2</p>
    </div>
    <script>
      const article = document.getElementById("article");
      // encontra o nó que será removido - o último parágrafo
      const lastP = article.lastElementChild;
      // remove o nó
      article.removeChild(lastP);
    </script>
  </body>
</html>

Neste caso, removemos o último parágrafo do bloco div.

Removendo Todos os Elementos

Às vezes, é necessário remover todos os elementos. Para isso, percorremos todos os elementos do contêiner e os removemos:

<div id="article">
  <h1>Página Inicial</h1>
  <p>Texto 1</p>
  <p>Texto 2</p>
</div>
<script>
  const article = document.getElementById("article");
  while (article.firstChild) {
    article.removeChild(article.firstChild);
  }
</script>

Este script efetivamente limpa todos os conteúdos do elemento com o id "article", removendo cada um de seus nós filhos, um por um, até que não restem mais filhos.