Latest web development tutorials

elementos DOM HTML

Adicionar, excluir e substituir elementos HTML.

Criar um novo elemento HTML - appendChild ()

Para adicionar um novo elemento ao DOM HTML, você deve primeiro criar o elemento e acrescentá-la aos elementos existentes.

Exemplos

<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 »

Exemplos de analítico

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

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

Para adicionar texto ao elemento <p>, você deve primeiro criar um nó de texto. Esse código cria um nó de texto:

var node=document.createTextNode("This is a new paragraph.");

Em seguida, você deve acrescentar nó de texto para o elemento <p>:

para.appendChild(node);

Finalmente, você deve adicionar este novo elemento para os elementos existentes.

Encontrar esse código para um elemento existente:

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

O código para adicionar um novo elemento para os elementos existentes:

element.appendChild(para);

Criar um novo elemento HTML - insertBefore ()

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

Se você não quer isso, você pode usar o método insertBefore ():

Exemplos

<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 »

Remover os elementos HTML existentes

Para excluir elementos HTML, você deve saber o elemento pai do elemento:

Exemplos

<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 »

Exemplos de analítico

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

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

Encontrar id = elementos "Div1":

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

Encontrar id = "p1" o elemento <p>:

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

Retire do sub-elemento elementos pai:

parent.removeChild(child);

lâmpada Posso apagar um elemento, no caso, não se refere ao elemento pai?
Desculpe. DOM precisa entender os elementos que você deseja excluir, bem como seu elemento pai.

Aqui estão uma solução comum: encontrar sub-elementos que você precisa remover e, em seguida, usar atributo parentNode para encontrar seu elemento pai:

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

Substituir elementos HTML

Para substituir os elementos DOM HTML, use o método replaceChild ():

Exemplos

<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 »