Elementi JavaScript HTML DOM (nodi)
Aggiunta e rimozione di nodi (elementi HTML)
Creazione di nuovi elementi HTML (nodi)
Per aggiungere un nuovo elemento al DOM HTML, devi prima creare l'elemento (nodo elemento), quindi aggiungerlo a 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>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Esempio spiegato
Questo codice crea un nuovo <p>elemento:
const para = document.createElement("p");
Per aggiungere testo <p>all'elemento, devi prima creare un nodo di testo. Questo codice crea un nodo di testo:
const node = document.createTextNode("This is a new paragraph.");
Quindi devi aggiungere il nodo di testo <p>all'elemento:
para.appendChild(node);
Infine devi aggiungere il nuovo elemento a un elemento esistente.
Questo codice trova un elemento esistente:
const element = document.getElementById("div1");
Questo codice aggiunge il nuovo elemento all'elemento esistente:
element.appendChild(para);
Creazione di nuovi elementi HTML - insertBefore()
Il appendChild()metodo nell'esempio precedente ha aggiunto il nuovo elemento come ultimo figlio del genitore.
Se non lo vuoi puoi usare 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>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Rimozione di elementi HTML esistenti
Per rimuovere un elemento HTML, utilizzare il remove()
metodo:
Esempio
<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>
Esempio spiegato
Il documento HTML contiene un <div>elemento con due nodi figlio (due <p>
elementi):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Trova l'elemento che desideri rimuovere:
const elmnt = document.getElementById("p1");
Quindi esegui il metodo remove() su quell'elemento:
elmnt.remove();
Il remove()metodo non funziona nei browser meno recenti, vedere l'esempio seguente su come utilizzarlo
removeChild().
Rimozione di un nodo figlio
Per i browser che non supportano il remove()metodo, devi trovare il nodo padre per rimuovere un elemento:
Esempio
<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>
Esempio spiegato
Questo documento HTML contiene un <div>elemento con due nodi figlio (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":
const parent = document.getElementById("div1");
Trova l' <p>elemento con id="p1":
const child = document.getElementById("p1");
Rimuovere il bambino dal genitore:
parent.removeChild(child);
Ecco una soluzione comune: trova il figlio che desideri rimuovere e usa la sua
parentNodeproprietà per trovare il genitore:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Sostituzione di elementi HTML
Per sostituire un elemento nel DOM HTML, utilizzare il replaceChild()metodo:
Esempio
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>