Es gibt insertBefore()
JavaScript, aber wie kann ich ein Element nach einem anderen Element einfügen, ohne jQuery oder eine andere Bibliothek zu verwenden?
javascript
dom
insert
append
Xah Lee
quelle
quelle
Antworten:
Wo
referenceNode
ist der Knoten,newNode
nach dem Sie setzen möchten? WennreferenceNode
es das letzte Kind in seinem übergeordneten Element ist, ist das in Ordnung, denn esreferenceNode.nextSibling
wirdnull
und seininsertBefore
Griffe , die von Fall zu Ende der Liste hinzugefügt.Damit:
Sie können es mit dem folgenden Snippet testen:
quelle
insertBefore()
arbeitet mit Textknoten. Warum willst duinsertAfter()
anders sein? Sie sollten ein separates Funktionspaar mit dem NameninsertBeforeElement()
undinsertAfterElement()
dafür erstellen .Einfaches JavaScript wäre das Folgende:
Vorher anhängen:
Anhängen nach:
Werfen Sie jedoch einige Prototypen ein, um die Verwendung zu vereinfachen
Durch Erstellen der folgenden Prototypen können Sie diese Funktion direkt aus neu erstellten Elementen aufrufen.
newElement.appendBefore(element);
newElement.appendAfter(element);
.appendBefore (Element) Prototyp
.appendAfter (Element) Prototyp
Führen Sie das folgende Code-Snippet aus, um alles in Aktion zu sehen
Code-Snippet anzeigen
Führen Sie es auf JSFiddle aus
quelle
existingElement.appendAfter(newElement);
. Sehen Sie, was ich bei dieser aktualisierten jsfiddle meine .insertAdjacentHTML
+outerHTML
Vorteile:
insertBefore
(Break Even, wenn der Name der vorhandenen Knotenvariablen 3 Zeichen lang ist)Nachteile:
outerHTML
das Element in eine Zeichenfolge konvertiert wird. Wir brauchen es, weilinsertAdjacentHTML
Inhalte eher aus Zeichenfolgen als aus Elementen hinzugefügt werden.quelle
.insertAdjacentElement()
Eine schnelle Google-Suche zeigt dieses Skript
quelle
targetElement.nextSibling
wird es zurückgegebennull
. Wennnode.insertBefore
mitnull
als zweitem Argument aufgerufen wird, wird der Knoten am Ende der Sammlung hinzugefügt. Mit anderen Worten, derif(parent.lastchild == targetElement) {
Zweig ist überflüssig, da erparent.insertBefore(newElement, targetElement.nextSibling);
alle Fälle richtig behandelt, auch wenn er auf den ersten Blick anders aussieht. Viele haben bereits in anderen Kommentaren darauf hingewiesen.Obwohl
insertBefore()
(siehe MDN ) großartig ist und von den meisten Antworten hier referenziert wird. Für zusätzliche Flexibilität und um etwas expliziter zu sein, können Sie Folgendes verwenden:insertAdjacentElement()
(siehe MDN ) Auf diese Weise können Sie auf ein beliebiges Element verweisen und das zu verschiebende Element genau dort einfügen, wo Sie möchten:Andere für ähnliche Anwendungsfälle zu berücksichtigen:
insertAdjacentHTML()
undinsertAdjacentText()
Verweise:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https: // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
quelle
Die Methode
node.after
( doc ) fügt einen Knoten nach einem anderen Knoten ein.Für zwei DOM-Knoten
node1
undnode2
,node1.after(node2)
fügtnode2
nachnode1
.Diese Methode ist in älteren Browsern nicht verfügbar, daher ist normalerweise eine Polyfüllung erforderlich.
quelle
Lösung 2018 (schlechte Praxis, bis 2020)
Ich weiß, dass diese Frage uralt ist, aber für zukünftige Benutzer ist dies ein modifizierter Prototyp. Dies ist nur eine Mikro-Polyfüllung für die .insertAfter-Funktion, die nicht vorhanden ist. Dieser Prototyp fügt
baseElement.insertAfter(element);
dem Element-Prototyp direkt eine neue Funktion hinzu :Sobald Sie die Polyfüllung in einer Bibliothek, einem Kern oder nur in Ihrem Code (oder an einer anderen Stelle, an der darauf verwiesen werden kann) platziert haben, schreiben Sie einfach
document.getElementById('foo').insertAfter(document.createElement('bar'));
2019 Lösung (Hässlich, gehe zu 2020)
Neue Bearbeitung: Sie sollten keine Prototypen verwenden. Sie überschreiben die Standardcodebasis und sind nicht sehr effizient oder sicher und können Kompatibilitätsfehler verursachen. Wenn dies jedoch für nichtkommerzielle Projekte gilt, sollte dies keine Rolle spielen. Wenn Sie eine sichere Funktion für den kommerziellen Gebrauch wünschen, verwenden Sie einfach eine Standardfunktion. es ist nicht schön, aber es funktioniert:
2020 Lösung
Aktuelle Webstandards für ChildNode: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode
Es ist derzeit im Lebensstandard und ist sicher.
Verwenden Sie für nicht unterstützte Browser diese Polyfüllung: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js
Jemand erwähnte, dass die Polyfüllung Protos verwendet, als ich sagte, dass sie eine schlechte Praxis seien. Sie sind, besonders wenn sie falsch verwendet werden, wie meine Lösung für 2018. Diese Polyfüllung befindet sich jedoch in der MDN-Dokumentation und verwendet eine Art Initialisierung und Ausführung, die sicherer ist. Außerdem ist es für die Unterstützung älterer Browser gedacht, in der Zeit, in der das Überschreiben von Prototypen nicht so schlecht war.
So verwenden Sie die 2020-Lösung:
quelle
Oder Sie können einfach tun:
quelle
quelle
Die Methode insertBefore () wird wie folgt verwendet
parentNode.insertBefore()
. Um dies nachzuahmen und eine Methode zuparentNode.insertAfter()
erstellen, können wir den folgenden Code schreiben.JavaScript
HTML
Beachten Sie, dass die Erweiterung des DOM möglicherweise nicht die richtige Lösung für Sie ist, wie in diesem Artikel angegeben .
Hovewer, dieser Artikel wurde 2010 geschrieben und die Dinge könnten jetzt anders sein. Entscheide dich also selbst.
JavaScript DOM insertAfter () -Methode @ jsfiddle.net
quelle
Idealerweise
insertAfter
sollte ähnlich wie insertBefore funktionieren . Der folgende Code führt Folgendes aus:Node
angehängtNode
, wird die neueNode
angehängtNode
nach der Referenz keine vorhanden istNode
, wird die neueNode
angehängtNode
ein Geschwister hat, wird das neueNode
vor diesem Geschwister eingefügtNode
Erweitern
Node
Ein häufiges Beispiel
Siehe den laufenden Code
Code-Snippet anzeigen
quelle
Ich weiß, dass diese Frage bereits viel zu viele Antworten hat, aber keine davon hat meine genauen Anforderungen erfüllt.
Ich wollte eine Funktion, die genau das entgegengesetzte Verhalten hat
parentNode.insertBefore
- das heißt, sie muss eine Null akzeptierenreferenceNode
(was die akzeptierte Antwort nicht tut) und woinsertBefore
am Ende der Kinder diese einfügen würde, muss diese am Anfang eingefügt werden , da sonst ' Es ist überhaupt nicht möglich, mit dieser Funktion am Startort einzufügen. der gleiche GrundinsertBefore
fügt am Ende ein.Da Sie für eine Null
referenceNode
das übergeordnete Element suchen müssen, müssen wir das übergeordnete Element kennen. DiesinsertBefore
ist eine Methode vonparentNode
, sodass auf diese Weise auf das übergeordnete Element zugegriffen werden kann. Unsere Funktion funktioniert nicht, daher müssen wir das übergeordnete Element als Parameter übergeben.Die resultierende Funktion sieht folgendermaßen aus:
Oder (wenn Sie müssen, ich empfehle es nicht) können Sie natürlich den
Node
Prototyp verbessern :quelle
Mit diesem Code wird ein Linkelement direkt nach dem letzten vorhandenen untergeordneten Element eingefügt, um eine kleine CSS-Datei einzufügen
quelle
Sie können verwenden
appendChild
Funktion verwenden, um nach einem Element einzufügen.Referenz: http://www.w3schools.com/jsref/met_node_appendchild.asp
quelle
eine robuste Implementierung von insertAfter.
};
quelle
Behandeln wir alle Szenarien
quelle
quelle
Sie können tatsächlich eine Methode verwenden, die
after()
in einer neueren Version von Chrome, Firefox und Opera aufgerufen wird . Der Nachteil dieser Methode ist, dass Internet Explorer sie noch nicht unterstützt.Beispiel:
Ein einfacher HTML-Code zum Testen ist:
Wie erwartet wird das Aufwärtselement nach dem Abwärtselement verschoben
quelle