Wie kann ich das Voranstellen und Anhängen mit normalem JavaScript implementieren, ohne jQuery zu verwenden?
javascript
append
prepend
Josef
quelle
quelle
Antworten:
Vielleicht fragen Sie nach den DOM-Methoden
appendChild
undinsertBefore
.quelle
function prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Hier ist ein Ausschnitt, der Sie zum Laufen bringt:
theParent.firstChild
wird uns einen Verweis auf das erste Element in uns gebentheParent
undtheKid
davor stellen.quelle
prepend()
Methode haben?Sie haben uns hier nicht viel gegeben, aber ich denke, Sie fragen nur, wie Sie dem Anfang oder Ende eines Elements Inhalte hinzufügen können. Wenn ja, können Sie dies ganz einfach tun:
Ziemlich einfach.
quelle
Wenn Sie eine unformatierte HTML-Zeichenfolge einfügen möchten, egal wie komplex, können Sie Folgendes verwenden:
insertAdjacentHTML
mit dem entsprechenden ersten Argument:Hinweis: Sie können jederzeit aufrufen
Element.outerHTML
, um die HTML-Zeichenfolge abzurufen, die das einzufügende Element darstellt.Ein Anwendungsbeispiel:
DEMO
Achtung:
insertAdjacentHTML
Bewahrt keine Hörer auf, die mit verbunden sind.addEventLisntener
.quelle
insertAdjacentHTML
bewahrt keine Zuhörer ..." Welche Zuhörer? Es ist HTML, daher müssen noch keine Elemente gebunden werden. Wenn Sie sich auf vorhandene Elemente im Inneren beziehenfoo
, ist dies keine wahre Aussage. Der springende Punkt.insertAdjacentHTML
ist, dass es die Zuhörer bewahrt . Sie denken vielleicht daran.innerHTML += "..."
, was die alten DOM-Knoten zerstört.insertAdjacentHTML
(nicht die Wurzel noch die vorhandenen Nachkommen der Wurzel)Ich habe dies zu meinem Projekt hinzugefügt und es scheint zu funktionieren:
Beispiel:
quelle
Um Ihr Leben zu vereinfachen, können Sie das
HTMLElement
Objekt erweitern. Es funktioniert möglicherweise nicht für ältere Browser, erleichtert Ihnen aber definitiv das Leben:Das nächste Mal können Sie Folgendes tun:
quelle
Hier ist ein Beispiel für die Verwendung von Prepend, um dem Dokument einen Absatz hinzuzufügen.
Ergebnis:
quelle
2017 weiß ich, dass für Edge 15 und IE 12 die Prepend-Methode nicht als Eigenschaft für Div-Elemente enthalten ist. Wenn jedoch jemand eine Kurzreferenz zum Polyfill einer Funktion benötigt, habe ich Folgendes erstellt:
Einfache Pfeilfunktion, die mit den meisten modernen Browsern kompatibel ist.
quelle
Wenn referenceElement null oder undefiniert ist, wird newElement am Ende der Liste der untergeordneten Knoten eingefügt.
Beispiele finden Sie hier: Node.insertBefore
quelle
Sie können auch unshift () verwenden, um einer Liste voranzustellen
quelle
Dies ist nicht der beste Weg, aber wenn jemand vor allem ein Element einfügen möchte, ist hier ein Weg.
quelle