Wie füge ich in JavaScript ein Element nach dem anderen ein, ohne Bibliotheken zu verwenden?-js-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-14 09:30:11

Original

1003 Leute haben es durchsucht

How to Insert an Element After Another in JavaScript Without Using Libraries?

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);

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

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);

Nach dem Login kopieren

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!