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

Elemente nach anderen in JavaScript ohne Bibliothek einfügen

In JavaScript gibt es die Methode insertBefore() zum Einfügen eines Elements vor einer angegebenen Referenz Knoten. Was aber, wenn Sie ein Element nach einem anderen Element einfügen möchten, ohne auf jQuery oder andere Bibliotheken angewiesen zu sein?

Antwort

Das folgende Snippet ist genau das, was Sie brauchen:

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

So funktioniert es:

• referenceNode stellt den Knoten danach dar in den Sie den neuen Knoten einfügen möchten (newNode).
• referenceNode.parentNode ruft den übergeordneten Knoten des referenceNode ab.
• referenceNode.nextSibling identifiziert den nächsten Geschwisterknoten des referenceNode. Wenn der referenceNode das letzte untergeordnete Element ist, ist nextSibling null. Dieser Fall wird von insertBefore() entsprechend behandelt, das an das Ende der untergeordneten Liste angehängt wird.

Beispielcode

Um diese Lösung zu verwenden, können Sie Definieren Sie die folgende Funktion:

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

Sie können diese Funktion dann wie folgt verwenden also:

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

Dieser Code fügt das span-Element mit dem Text „test“ nach dem div mit der ID „foo“ ein.

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