JavaScript HTML DOM-Elemente (Knoten)

Dieses Kapitel beschreibt, wie man Elemente (Knoten) zu einem Dokument hinzufügt und daraus entfernt.

Neue HTML-Elemente (Knoten) erstellen - appendChild()

Um ein neues HTML-Element (Knoten) zu erstellen, müssen Sie zuerst ein Element erstellen und es dann zu einem vorhandenen Element hinzufügen.

Beispielanalyse

Der folgende Code wird verwendet, um ein <p>-Element zu erstellen:

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

Erstellen Sie einen neuen Textknoten für das <p>-Element:

var node = document.createTextNode("这是一个新的段落。");

Fügen Sie den Textknoten zum <p>-Element hinzu:

para.appendChild(node);

Fügen Sie schließlich das p-Element zu einem vorhandenen Element hinzu.

Finden Sie ein vorhandenes Element:

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

Zu einem vorhandenen Element hinzufügen:

element.appendChild(para);

Neue HTML-Elemente (Knoten) erstellen - insertBefore()

Im obigen Beispiel haben wir dieappendChild()Methode verwendet, mit der neue Elemente am Ende angehängt werden.

Wenn wir das neue Element am Anfang hinzufügen müssen, können wir dieinsertBefore()Methode verwenden:

Vorhandene Elemente entfernen

Um ein Element zu entfernen, müssen Sie das Elternelement dieses Elements kennen.

Hinweis:Frühe Internet Explorer-Browser unterstützen die node.remove()-Methode nicht.

Beispielanalyse

Im HTML-Dokument enthält das <div>-Element zwei untergeordnete Knoten (zwei <p>-Elemente):

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

Finden Sie das Element mit id="div1":

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

Finden Sie das <p>-Element mit id="p1":

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

Entfernen Sie den Kindknoten aus dem Elternelement:

parent.removeChild(child);

	Es wäre großartig, wenn Sie ein Element löschen könnten, ohne auf sein übergeordnetes Element zu verweisen. Leider funktioniert es nicht auf diese Weise. Das DOM muss das Element, das Sie löschen möchten, und sein übergeordnetes Element kennen.

Der folgende Code sucht das zu entfernende untergeordnete Element, findet dann dessen übergeordnetes Element und entfernt anschließend dieses untergeordnete Element (Sie müssen den übergeordneten Knoten kennen, um einen Knoten zu löschen):

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

HTML-Elemente ersetzen – replaceChild()

Wir können die Methode replaceChild() verwenden, um Elemente im HTML-DOM zu ersetzen.

HTML-DOM-Tutorial

Im HTML-DOM-Abschnitt unseres JavaScript-Tutorials haben Sie gelernt:

• Wie Sie den Inhalt eines HTML-Elements ändern (innerHTML)
• Wie Sie den Stil eines HTML-Elements ändern (CSS)
• Wie Sie auf HTML-DOM-Ereignisse reagieren
• Wie Sie HTML-Elemente hinzufügen oder entfernen

Wenn Sie mehr über die Verwendung von JavaScript für den Zugriff auf das HTML DOM erfahren möchten, besuchen Sie bitte unser vollständigesHTML DOM Tutorial。