Adicionando e removendo nós (elementos HTML)
Criando Novos Elementos HTML (Nodes)
Para adicionar um novo elemento ao DOM HTML, você deve criar o elemento (elemento de nó) em primeiro lugar e, em seguida, anexá-lo a um elemento existente.
Exemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Tente você mesmo " exemplo Explicado
Este código cria um novo <p> elemento:
var para = document.createElement("p");
Para adicionar texto ao <p> elemento, você deve criar um nó de texto em primeiro lugar. Esse código cria um nó de texto:
var node = document.createTextNode("This is a new paragraph.");
Em seguida, é necessário anexar o nó de texto para o <p> elemento:
para.appendChild(node);
Finalmente, você deve acrescentar o novo elemento a um elemento existente.
Este código encontra um elemento existente:
var
element = document.getElementById("div1");
Este código adiciona um novo elemento ao elemento existente:
element.appendChild(para);
A criação de novos elementos HTML - insertBefore()
O appendChild() método no exemplo anterior, anexa o novo elemento como o último filho do pai.
Se você não quer que você pode usar o insertBefore() método:
Exemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Tente você mesmo " Removendo elementos HTML existentes
Para remover um elemento HTML, você deve conhecer o pai do elemento:
Exemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Tente você mesmo " O método node.remove() é implementado na especificação DOM 4.
Mas por causa do suporte ao navegador pobre, você não deve usá-lo.
exemplo Explicado
Este documento HTML contém um <div> elemento com dois nós filhos (dois <p> elementos):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Localizar o elemento com id="div1" :
var parent = document.getElementById("div1");
Localize o elemento <p> com id="p1" :
var child = document.getElementById("p1");
Retirar a criança do pai:
parent.removeChild(child);
Seria bom para ser capaz de remover um elemento sem se referir ao pai.
Mas desculpe. O DOM precisa saber tanto o elemento que deseja remover, e seu pai.
Aqui é uma solução comum: encontrar a criança que deseja remover, e usar sua propriedade parentNode para encontrar o pai:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Substituir Elementos HTML
Para substituir um elemento do DOM HTML, utilize o replaceChild() método:
Exemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Tente você mesmo "