Latest web development tutorials

elementi DOM HTML

Aggiungere, eliminare e sostituire elementi HTML.

Creare un nuovo elemento HTML - appendChild ()

Per aggiungere un nuovo elemento al DOM HTML, è necessario prima creare l'elemento e aggiungerlo agli elementi esistenti.

Esempi

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

Prova »

Esempi di analitica

Questo codice crea un nuovo elemento <p>:

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

Per aggiungere testo all'elemento <p>, è necessario innanzitutto creare un nodo di testo. Questo codice crea un nodo di testo:

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

Quindi è necessario aggiungere nodo di testo per l'elemento <p>:

para.appendChild(node);

Infine, è necessario aggiungere questo nuovo elemento per gli elementi esistenti.

Trova il codice di un elemento esistente:

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

Il codice per aggiungere un nuovo elemento agli elementi esistenti:

element.appendChild(para);

Creare un nuovo elemento HTML - insertBefore ()

Su un esempio di appendChild () il metodo, il nuovo elemento come ultimo elemento figlio dell'elemento padre da aggiungere.

Se non si desidera che questo, è possibile utilizzare il metodo insertBefore ():

Esempi

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

Prova »

Rimuovere gli elementi HTML esistenti

Per eliminare elementi HTML, è necessario conoscere l'elemento padre dell'elemento:

Esempi

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


Prova »

Esempi di analitica

Questo documento contiene HTML <div> in uno dei due nodi figli (due <p> elemento) con:

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

Trova id = elementi "div1":

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

Trova id = del <p> elemento "P1":

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

Togliere dal sotto-elementi elemento genitore:

parent.removeChild(child);

lampada Posso eliminare un elemento nel caso non si riferisce all'elemento genitore?
Scusi. DOM bisogno di capire gli elementi che si desidera eliminare, così come suo elemento genitore.

Qui ci sono una soluzione comune: trovare sotto-elementi necessari per rimuovere, e quindi utilizzare l'attributo parentNode per trovare suo elemento genitore:

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

Sostituire gli elementi HTML

Per sostituire gli elementi DOM HTML, utilizzare il metodo replaceChild ():

Esempi

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

Prova »