Wie füge ich Elemente nach anderen Elementen in JavaScript ein?

Elemente nach anderen in JavaScript einfügen

Das Einfügen von Elementen nach vorhandenen Knoten ist ein häufiger Vorgang in JavaScript. Obwohl es die Methode insertBefore() gibt, können damit nur Elemente vor einem Referenzknoten hinzugefügt werden. Um Elemente nacheinander einzufügen, benötigen wir einen alternativen Ansatz.

Lösung ohne Bibliotheken

Um ein Element nach dem anderen einzufügen, ohne Bibliotheken zu verwenden, können wir den folgenden Code verwenden:

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

Hier ist eine Aufschlüsselung:

• referenceNode: Das Element, nach dem wir wollen Fügen Sie den neuen Knoten ein.
• parentNode: Das übergeordnete Element von referenceNode.
• nextSibling: Das nächste Geschwisterelement von referenceNode, das null ist, wenn referenceNode das letzte untergeordnete Element ist.

Wenn referenceNode das letzte untergeordnete Element ist, ist nextSibling null. insertBefore behandelt diesen Fall, indem es den neuen Knoten am Ende der Liste hinzufügt.

Wiederverwendbare Funktion

Wir können diese Funktionalität in eine wiederverwendbare Funktion einschließen:

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

Beispiel

Um diese Funktion zu testen, können wir Folgendes verwenden Snippet:

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

Dadurch wird ein neues Span-Element mit dem Text „test“ erstellt und nach dem div-Element mit der ID „foo“ eingefügt.

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