Aggiunta e rimozione di nodi (elementi HTML)
Creazione di nuovi elementi HTML (nodi)
Per aggiungere un nuovo elemento al DOM HTML, è necessario creare l'elemento (nodo elemento) prima, e quindi aggiungere ad un elemento esistente.
Esempio
<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 tu stesso " esempio spiegato
Questo codice crea un nuovo <p> elemento:
var para = document.createElement("p");
Per aggiungere testo al <p> elemento, è necessario creare un nodo di testo prima. Questo codice crea un nodo di testo:
var node = document.createTextNode("This is a new paragraph.");
Poi si deve aggiungere il nodo di testo per il <p> elemento:
para.appendChild(node);
Infine è necessario aggiungere il nuovo elemento a un elemento esistente.
Questo codice trova un elemento esistente:
var
element = document.getElementById("div1");
Questo codice aggiunge il nuovo elemento con l'elemento esistente:
element.appendChild(para);
Creazione di nuovi elementi HTML - insertBefore()
Il appendChild() metodo nell'esempio precedente, aggiunto il nuovo elemento come l'ultimo figlio del genitore.
Se non si desidera che è possibile utilizzare il insertBefore() metodo:
Esempio
<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 tu stesso " Rimozione di elementi HTML esistenti
Per rimuovere un elemento HTML, è necessario conoscere il genitore dell'elemento:
Esempio
<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 tu stesso " Il metodo node.remove() è implementata nella specifica DOM 4.
Ma a causa di scarso supporto del browser, non si dovrebbe usare.
esempio spiegato
Questo documento HTML contiene un <div> elemento con due nodi figli (due <p> elementi):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Trova l'elemento con id="div1" :
var parent = document.getElementById("div1");
Trova l'elemento <p> con id="p1" :
var child = document.getElementById("p1");
Togliere il bambino dal genitore:
parent.removeChild(child);
Sarebbe bello essere in grado di rimuovere un elemento senza fare riferimento al genitore.
Ma mi dispiace. Il DOM ha bisogno di conoscere sia l'elemento che si desidera rimuovere, e il suo genitore.
Ecco una soluzione comune: trovare il bambino che si desidera rimuovere, e utilizzare la sua proprietà parentNode per trovare il genitore:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Sostituzione Elementi HTML
Per sostituire un elemento al DOM HTML, utilizzare la replaceChild() metodo:
Esempio
<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 tu stesso "