JavaScript- HTML-DOM-Elemente (Knoten)
Knoten hinzufügen und entfernen (HTML-Elemente)
Erstellen neuer HTML-Elemente (Knoten)
Um ein neues Element zum HTML-DOM hinzuzufügen, müssen Sie zuerst das Element (Elementknoten) erstellen und es dann an ein vorhandenes Element anhängen.
Beispiel
<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>
Beispiel erklärt
Dieser Code erstellt ein neues <p>Element:
const para = document.createElement("p");
Um dem Element Text hinzuzufügen <p>, müssen Sie zuerst einen Textknoten erstellen. Dieser Code erstellt einen Textknoten:
const node = document.createTextNode("This is a new paragraph.");
Dann müssen Sie den Textknoten an das <p>Element anhängen:
para.appendChild(node);
Schließlich müssen Sie das neue Element an ein vorhandenes Element anhängen.
Dieser Code findet ein vorhandenes Element:
const element = document.getElementById("div1");
Dieser Code fügt das neue Element an das vorhandene Element an:
element.appendChild(para);
Neue HTML-Elemente erstellen - insertBefore()
Die appendChild()Methode im vorherigen Beispiel hat das neue Element als letztes untergeordnetes Element des übergeordneten Elements angehängt.
Wenn Sie das nicht möchten, können Sie die insertBefore()Methode verwenden:
Beispiel
<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>
Entfernen vorhandener HTML-Elemente
Um ein HTML-Element zu entfernen, verwenden Sie die remove()
Methode:
Beispiel
<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>
Beispiel erklärt
Das HTML-Dokument enthält ein <div>Element mit zwei untergeordneten Knoten (zwei <p>
Elemente):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Suchen Sie das Element, das Sie entfernen möchten:
const elmnt = document.getElementById("p1");
Führen Sie dann die Methode remove () für dieses Element aus:
elmnt.remove();
Die remove()Methode funktioniert nicht in älteren Browsern, siehe
removeChild()stattdessen das Beispiel unten.
Entfernen eines untergeordneten Knotens
Bei Browsern, die die Methode nicht unterstützen remove(), müssen Sie den übergeordneten Knoten finden, um ein Element zu entfernen:
Beispiel
<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>
Beispiel erklärt
Dieses HTML-Dokument enthält ein <div>Element mit zwei untergeordneten Knoten (zwei <p>
Elemente):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Finden Sie das Element mit id="div1":
const parent = document.getElementById("div1");
Finden Sie das <p>Element mit id="p1":
const child = document.getElementById("p1");
Entfernen Sie das Kind vom Elternteil:
parent.removeChild(child);
Hier ist eine gängige Problemumgehung: Suchen Sie das untergeordnete Element, das Sie entfernen möchten, und verwenden Sie seine
parentNodeEigenschaft, um das übergeordnete Element zu finden:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Ersetzen von HTML-Elementen
Um ein Element im HTML-DOM zu ersetzen, verwenden Sie die replaceChild()Methode:
Beispiel
<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>