Wie kann ich das Voranstellen und Anhängen mit normalem JavaScript implementieren?

150

Wie kann ich das Voranstellen und Anhängen mit normalem JavaScript implementieren, ohne jQuery zu verwenden?

Josef
quelle
1
Ich verstehe nicht, was du meinst.
Pekka
@GenericTypeTea: Habe ich ungefähr zur gleichen Zeit ... Ich werde es jetzt in Ruhe lassen!
Mark Byers
@ Mark - Deine Bearbeitung war besser :).
djdd87

Antworten:

147

Vielleicht fragen Sie nach den DOM-Methoden appendChild und insertBefore.

parentNode.insertBefore(newChild, refChild)

Fügt den Knoten newChildals untergeordneten Knoten parentNodevor dem vorhandenen untergeordneten Knoten ein refChild. (Rückgabe newChild.)

Wenn refChildnull ist, newChildwird am Ende der Liste der untergeordneten Elemente hinzugefügt. Gleichwertiger und besser lesbar verwenden parentNode.appendChild(newChild).

Grumdrig
quelle
7
so vorangestellt ist im Grunde das dannfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Muhammad Umer
165

Hier ist ein Ausschnitt, der Sie zum Laufen bringt:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChildwird uns einen Verweis auf das erste Element in uns geben theParentund theKiddavor stellen.

Klopfen
quelle
Danke, warum für das Voranstellen einfach insertBefore verwenden, ohne zusätzliches div zu erstellen? wie Grumdrig antworten?
Yosef
Dies schafft ein Element und fügt es der dom hinzu, füge und füge die Arbeit anders hinzu
Andrei Cristian Prodan
Ich bekomme diese im Vergleich zu Grumdigs Antwort
Andrew
10
Es ist 2015. Können wir schon eine eingebaute prepend()Methode haben?
1,21 Gigawatt
Node.append oder node.appendChild sind ungültige Methoden. Verwenden Sie stattdessen insertBefore (node, null)
Suhayb
28

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:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

Ziemlich einfach.

Munzilla
quelle
Schön, genau das, wonach ich gesucht habe.
Andrei Cristian Prodan
2
@Munzilla Diese Methode zwingt den Browser, alle vorhandenen untergeordneten Elemente erneut zu analysieren. In den oben genannten Lösungen muss der Browser nur das angegebene untergeordnete Element an das Dokument anhängen.
Sayam Qazi
12

Wenn Sie eine unformatierte HTML-Zeichenfolge einfügen möchten, egal wie komplex, können Sie Folgendes verwenden: insertAdjacentHTMLmit dem entsprechenden ersten Argument:

'beforebegin' Vor dem Element selbst. 'afterbegin' Nur innerhalb des Elements, vor seinem ersten Kind. 'beforeend' Nur innerhalb des Elements, nach seinem letzten Kind. 'afterend' Nach dem Element selbst.

Hinweis: Sie können jederzeit aufrufen Element.outerHTML, um die HTML-Zeichenfolge abzurufen, die das einzufügende Element darstellt.

Ein Anwendungsbeispiel:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

Achtung: insertAdjacentHTML Bewahrt keine Hörer auf, die mit verbunden sind .addEventLisntener.

artur grzesiak
quelle
" insertAdjacentHTMLbewahrt 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 beziehen foo, ist dies keine wahre Aussage. Der springende Punkt .insertAdjacentHTMList, dass es die Zuhörer bewahrt . Sie denken vielleicht daran .innerHTML += "...", was die alten DOM-Knoten zerstört.
Spanky
@spanky Sie haben Recht, dass Aussage auf mehrere Arten interpretiert werden kann, was ich eigentlich meinte, waren die DOM-Knoten frisch erstellt mit insertAdjacentHTML(nicht die Wurzel noch die vorhandenen Nachkommen der Wurzel)
artur grzesiak
5

Ich habe dies zu meinem Projekt hinzugefügt und es scheint zu funktionieren:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

Beispiel:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);
Raza
quelle
5

Um Ihr Leben zu vereinfachen, können Sie das HTMLElementObjekt erweitern. Es funktioniert möglicherweise nicht für ältere Browser, erleichtert Ihnen aber definitiv das Leben:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

Das nächste Mal können Sie Folgendes tun:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);
Moka
quelle
1
Was ist, wenn der Knoten keine untergeordneten Knoten hat? In diesem Fall ist firstChild null
felixfbecker
prepend ist bereits vorhanden, siehe ParentNode.prepend (). Um prependChild zu erstellen, reicht es aus, prnt.prepend (chld)
Igor Fomenko
2

Hier ist ein Beispiel für die Verwendung von Prepend, um dem Dokument einen Absatz hinzuzufügen.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

Ergebnis:

<p>Example text</p>
JamesH
quelle
1

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:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

Einfache Pfeilfunktion, die mit den meisten modernen Browsern kompatibel ist.

akiespenc
quelle
0
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

Wenn referenceElement null oder undefiniert ist, wird newElement am Ende der Liste der untergeordneten Knoten eingefügt.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

Beispiele finden Sie hier: Node.insertBefore

b3wii
quelle
0

Sie können auch unshift () verwenden, um einer Liste voranzustellen

Steve Freed
quelle
-1

Dies ist nicht der beste Weg, aber wenn jemand vor allem ein Element einfügen möchte, ist hier ein Weg.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);
Güven Altuntaş
quelle