Elementos (Nós) do JavaScript HTML DOM

Adicionar e remover nós (elementos HTML)

Criar novos elementos HTML (nós)

Para adicionar novos elementos ao DOM HTML, você deve primeiro criar esse elemento (nó de elemento) e depois adicioná-lo ao elemento existente.

Exemplo

<div id="div1">
<p id="p1">Este é um parágrafo.</p>
<p id="p2">Este é outro parágrafo.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Este é o novo texto.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(parágrafo);
</script>

Experimente Agora

exemplos explicativos

Este código cria um novo <p> Elemento:

var para = document.createElement("p");

Para <p> Para adicionar um nó de texto a um elemento, é necessário criar primeiro um nó de texto. Este código cria um nó de texto:

var node = document.createTextNode("Este é um novo parágrafo.");

Então você precisa adicionar <p> Adicionar este nó de texto ao elemento:

para.appendChild(node);

Por fim, você precisa adicionar esse novo elemento ao elemento existente.

Este código busca um elemento existente:

var element = document.getElementById("div1");

Este código adiciona um novo elemento a esse elemento existente:

element.appendChild(para);

Criar novo elemento HTML - insertBefore()

No exemplo anterior, appendChild() método, adicionar um novo elemento como o último filho do pai.

Além disso, você pode usar insertBefore() Método:

Exemplo

<div id="div1">
<p id="p1">Este é um parágrafo.</p>
<p id="p2">Este é outro parágrafo.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Este é o novo texto.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Experimente Agora

remover elementos HTML existentes

Para remover elementos HTML, use remove() Método:

Exemplo

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

Experimente Agora

exemplos explicativos

Este documento HTML contém um com dois nós filhos (dois <p> do elemento) <div> Elemento:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

Encontrar o elemento a ser removido:

const elmnt = document.getElementById("p1");

Depois disso, execute remove() Método:

elmnt.remove();

Atenção:O método remove() não funciona em navegadores antigos, consulte os exemplos abaixo para saber como usar removeChild()。

remover nó filho

Para navegadores que não suportam remove() Métodos do navegador, você deve encontrar o nó pai para remover um elemento:

Exemplo

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Experimente Agora

exemplos explicativos

Este documento HTML contém um com dois nós filhos (dois <p> do elemento) <div> Elemento:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

encontrar id="div1" do elemento:

const parent = document.getElementById("div1");

encontrar id="p1" de <p> Elemento:

const child = document.getElementById("p1");

Remover elemento filho do elemento pai:

parent.removeChild(child);

Esta é uma solução comum: encontre o nó filho a ser removido e use parentNode A propriedade encontrou o nó pai:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Substituição de Elementos HTML

Para substituir elementos, use replaceChild() Método:

Exemplo

<div id="div1">
<p id="p1">Este é um parágrafo.</p>
<p id="p2">Este é outro parágrafo.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Este é o novo texto.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Experimente Agora