Heim > Web-Frontend > js-Tutorial > Wie füge ich in JavaScript ein Element nach dem anderen ein?

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

Mary-Kate Olsen
Freigeben: 2024-12-24 03:44:13
Original
508 Leute haben es durchsucht

How to Insert an Element After Another in JavaScript?

Ein Element nach dem anderen in JavaScript einfügen

Während JavaScript die Methode insertBefore() bereitstellt, um ein Element vor einem anderen einzufügen, gibt es keine integrierte Methode -in-Methode zum Einfügen eines Elements nach dem anderen. Um dies zu erreichen, können wir die folgende benutzerdefinierte Technik verwenden:

Lösung:

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
Nach dem Login kopieren

Erklärung:

  • referenceNode: Das Element, in das Sie das neue Element einfügen möchten danach.
  • newNode: Das neu einzufügende Element.
  • parentNode: Das übergeordnete Element des Referenzknotens.
  • nextSibling: Der Knoten, der dem Referenzknoten folgt (oder null, wenn es der letzte ist). child).

insertBefore() benötigt zwei Argumente: den neuen Knoten, der eingefügt werden soll, und den Knoten, vor dem der neue Knoten platziert werden soll. Durch die Übergabe von referenceNode.nextSibling stellen wir sicher, dass der neue Knoten nach dem Referenzknoten eingefügt wird.

Beispielfunktion:

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
Nach dem Login kopieren

Verwendung:

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

Dadurch wird ein span-Element mit dem Text „test“ nach dem div-Element mit dem eingefügt id „foo“.

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

Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage