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

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

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

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.

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.

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.

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

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

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>

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.

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

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

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