Wie füge ich in JavaScript ein Element nach dem anderen ein, ohne Bibliotheken zu verwenden?

Einfügen eines Elements nach dem anderen in JavaScript ohne externe Bibliotheken

Im Bereich JavaScript versuchen Programmierer häufig, Elemente innerhalb des DOM zu manipulieren. Während jQuery und andere Bibliotheken solche Aufgaben vereinfachen, ist es möglich, das Einfügen von Elementen zu erreichen, ohne auf externe Abhängigkeiten angewiesen zu sein.

Frage:

Wie kann ein Element nach einem anderen Element eingefügt werden? in JavaScript ohne die Hilfe von Bibliotheken wie jQuery?

Antwort:

Um ein Element nach einem vorhandenen Knoten einzufügen, stellt JavaScript die Methode insertBefore() bereit. Im Gegensatz zum Hauptzweck von insertBefore(), das Einfügen vor einem Referenzknoten, können wir es jedoch nutzen, um unser Ziel zu erreichen.

Der folgende Ausschnitt zeigt, wie:

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

wobei:

• referenceNode stellt das Element dar, nach dem Sie das neue Element einfügen möchten
• parentNode ruft das ab übergeordnetes Element des Referenzknotens
• nextSibling bezieht sich auf das Element unmittelbar nach dem Referenzknoten. Wenn der Referenzknoten der letzte untergeordnete Knoten ist, ist nextSibling null und insertBefore() behandelt diesen Fall durch Anhängen an das Ende der Liste.

Beispielfunktion:

Eine prägnante Funktion kann erstellt werden, um diesen Vorgang zu kapseln:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Testen die Funktion:

Um unseren Code zu validieren, können wir das folgende Snippet verwenden:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

Dieser Code fügt einen test Element nach dem

Element mit der ID „foo“.

Das obige ist der detaillierte Inhalt vonWie füge ich in JavaScript ein Element nach dem anderen ein, ohne Bibliotheken zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery NULL if while using function dom this Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn