So erstellen Sie Geschwisterknoten in Javascript

JavaScript ist eine Programmiersprache, die häufig für die Front-End-Entwicklung verwendet wird. Sie kann HTML-Elemente und andere DOM-Operationen erstellen, ändern und löschen. In HTML-Dokumenten beziehen sich Geschwisterknoten auf alle untergeordneten Knoten unter demselben übergeordneten Knoten. Manchmal müssen wir über JavaScript einen neuen Geschwisterknoten erstellen, um dynamische Effekte oder interaktive Funktionen auf der Webseite zu erzielen.

Um Geschwisterknoten zu erstellen, müssen Sie DOM-Elemente im HTML-Dokument über JavaScript bedienen. DOM (Document Object Model) ist eine Darstellung eines HTML-Dokuments. Es wandelt das HTML-Dokument in eine Baumstruktur um, auf die mit JavaScript zugegriffen und bearbeitet werden kann.

Im Folgenden werde ich in mehreren Fällen demonstrieren, wie man mit JavaScript Geschwisterknoten erstellt.

1. Neues Element vor Geschwisterelementen einfügen

Wir können die Methode insertBefore() verwenden, um ein neues Element vor Geschwisterelementen hinzuzufügen. Das Folgende ist der Beispielcode:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, refNode);

In diesem Beispiel verwenden Sie zuerst die Methode getElementById(), um den Referenzknoten abzurufen (d. h. das Element zum Erstellen eines Geschwisterknotens), und verwenden Sie dann die Methode createElement(), um ein Div zu erstellen Elementknoten und setzen Sie sein innerHTML-Attribut auf „Neuer Knoten“. Verwenden Sie abschließend die Methode insertBefore(), um den neuen Knoten in den übergeordneten Knoten des Referenzknotens einzufügen und zum vorherigen Geschwisterknoten des Referenzknotens zu werden.

2. Ein neues Element nach einem Geschwisterelement einfügen

Wenn wir nach einem Geschwisterelement einen neuen Knoten hinzufügen müssen, können wir zuerst den nächsten Geschwisterknoten des Geschwisterelements abrufen und dann einen neuen Knoten davor einfügen . Das Folgende ist der Beispielcode:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 获取参考节点的下一个兄弟节点
var nextNode = refNode.nextSibling;

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, nextNode);

In diesem Beispiel verwenden Sie zuerst die Methode getElementById(), um den Referenzknoten abzurufen, erstellen dann einen div-Elementknoten und setzen sein innerHTML-Attribut auf „neuer Knoten“. Verwenden Sie dann das Attribut nextSibling, um den nächsten Geschwisterknoten des Referenzknotens abzurufen. Verwenden Sie abschließend die Methode insertBefore() im übergeordneten Knoten des Referenzknotens, um den neuen Knoten vor dem nachfolgenden Geschwisterknoten des Referenzknotens einzufügen.

3. Neue Elemente in Tags einfügen

Wenn wir einen Knoten innerhalb eines vorhandenen Tags hinzufügen möchten, können wir die Methode appendChild() verwenden. Das Folgende ist der Beispielcode:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("span");
newNode.innerHTML = "新节点";

// 将新节点添加到参考节点的内部
refNode.appendChild(newNode);

In diesem Beispiel verwenden Sie zuerst die Methode getElementById(), um den Referenzknoten abzurufen, erstellen dann einen Span-Elementknoten und setzen sein innerHTML-Attribut auf „neuer Knoten“. Verwenden Sie abschließend die Methode appendChild() innerhalb des Referenzknotens, um den neuen Knoten zum Label hinzuzufügen.

Zusammenfassung

In JavaScript können wir HTML-Elemente und andere DOM-Operationen erstellen, ändern, löschen, indem wir DOM-Elemente bedienen. Eine der häufigsten Operationen ist das Erstellen neuer Geschwisterknoten. In diesem Artikel werden drei Methoden zum Erstellen von Geschwisterknoten über JavaScript vorgestellt, darunter das Einfügen neuer Elemente vor Geschwisterelementen, das Einfügen neuer Elemente nach Geschwisterelementen und das Einfügen neuer Elemente in Tags. Wir können verschiedene Methoden wählen, um je nach tatsächlicher Situation dynamische Effekte oder interaktive Funktionen von Webseiten zu erzielen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Geschwisterknoten in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!