JavaScript HTML DOM-elementen (knooppunten)
Nodes toevoegen en verwijderen (HTML-elementen)
Nieuwe HTML-elementen (knooppunten) maken
Om een nieuw element aan de HTML DOM toe te voegen, moet u eerst het element (elementknooppunt) maken en het vervolgens aan een bestaand element toevoegen.
Voorbeeld
<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>
Voorbeeld uitgelegd
Deze code maakt een nieuw <p>element aan:
const para = document.createElement("p");
Om tekst aan het <p>element toe te voegen, moet u eerst een tekstknooppunt maken. Deze code maakt een tekstknooppunt:
const node = document.createTextNode("This is a new paragraph.");
Vervolgens moet u het tekstknooppunt aan het <p>element toevoegen:
para.appendChild(node);
Ten slotte moet u het nieuwe element aan een bestaand element toevoegen.
Deze code vindt een bestaand element:
const element = document.getElementById("div1");
Deze code voegt het nieuwe element toe aan het bestaande element:
element.appendChild(para);
Nieuwe HTML-elementen maken - insertBefore()
De appendChild()methode in het vorige voorbeeld voegde het nieuwe element toe als het laatste kind van de ouder.
Als je dat niet wilt, kun je de insertBefore()methode gebruiken:
Voorbeeld
<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>
Bestaande HTML-elementen verwijderen
Gebruik de remove()
methode om een HTML-element te verwijderen:
Voorbeeld
<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>
Voorbeeld uitgelegd
Het HTML-document bevat een <div>element met twee onderliggende knooppunten (twee <p>
elementen):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Zoek het element dat u wilt verwijderen:
const elmnt = document.getElementById("p1");
Voer vervolgens de methode remove() uit op dat element:
elmnt.remove();
De remove()methode werkt niet in oudere browsers, zie het onderstaande voorbeeld om in plaats daarvan te gebruiken
removeChild().
Een onderliggende node verwijderen
Voor browsers die de methode niet ondersteunen remove(), moet u het bovenliggende knooppunt vinden om een element te verwijderen:
Voorbeeld
<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>
Voorbeeld uitgelegd
Dit HTML-document bevat een <div>element met twee onderliggende knooppunten (twee <p>
elementen):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Zoek het element met id="div1":
const parent = document.getElementById("div1");
Zoek het <p>element met id="p1":
const child = document.getElementById("p1");
Verwijder het kind van de ouder:
parent.removeChild(child);
Hier is een veelvoorkomende oplossing: Zoek het onderliggende item dat u wilt verwijderen en gebruik de
parentNodeeigenschap om het bovenliggende item te vinden:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
HTML-elementen vervangen
Gebruik de replaceChild()methode om een element in de HTML DOM te vervangen:
Voorbeeld
<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>