web-dev-qa-db-de.com

Wie setze ich das DOM-Element als erstes Kind

Ich habe Element E und füge einige Elemente hinzu. Plötzlich finde ich heraus, dass das nächste Element das erste Kind von E sein sollte. Was ist der Trick, wie geht das? Die Methode nicht verschieben funktioniert nicht, da E ein Objekt und kein Array ist. 

Ein langer Weg wäre es, durch E's Kinder zu iterieren und den Schlüssel ++ zu bewegen, aber ich bin sicher, dass es einen schöneren Weg gibt. 

javascriptjqueryarraysdomelements
156
Popara
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
357
nemisj

Version 2017

Sie können verwenden 

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

Von MDN :

Die Methode insertAdjacentElement () fügt einen bestimmten Elementknoten an einer bestimmten Position relativ zu dem Element ein, für das er aufgerufen wird.

position
Ein DOMString, der die Position relativ zum Element darstellt. muss eine der folgenden Zeichenfolgen sein:
beforebegin: Vor dem Element selbst.
afterbegin: Direkt im Element vor dem ersten Kind.
beforeend: Direkt im Element, nach dem letzten Kind.
afterend: Nach dem Element selbst. 

Element
Das Element, das in den Baum eingefügt werden soll.

Auch in der Familie von insertAdjacent gibt es die Geschwistermethoden: 

element.insertAdjacentHTML('afterbegin','htmlText') für direktes Einfügen von HTML-Strings, wie innerHTML, jedoch ohne alles zu überschreiben, so dass Sie den bedrückenden Prozess von document.createElement springen und sogar ganze Komponenten mit String-Manipulationsprozess erstellen können

element.insertAdjacentText zum Einfügen einer Zeichenkette in ein Element. nicht mehr encode/decode

59
pery mimon

Version 2018

parentElement.prepend(newFirstChild);

Das ist modern JS! Es ist besser lesbar als bisherige Optionen. Es ist derzeit in Chrome, FF und Opera verfügbar.

P.S. Sie können Strings direkt voranstellen 

parentElement.prepend('This text!');

developer.mozilla.org

Kann ich - 86% Oktober 2018 verwenden

Polyfill

29
Gibolt

Sie können es direkt in all Ihre Fenster-HTML-Elemente implementieren.
So was :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
8
yorg

Angenommene Antwort in eine Funktion überarbeitet:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
5
Joseph Dykstra

Wenn ich es nicht falsch verstanden habe:

$("e").prepend("<yourelem>Text</yourelem>");

Oder

$("<yourelem>Text</yourelem>").prependTo("e");

Obwohl es sich anhört, wie aus Ihrer Beschreibung hervorgeht, ist eine Bedingung damit verbunden

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
2
James Wiseman

Ich denke, Sie suchen nach der .prepend - Funktion in jQuery. Beispielcode:

$("#E").prepend("<p>Code goes here, yo!</p>");
1
Emil Vikström
var newItem = document.createElement("LI");       // Create a <li> node
var textnode = document.createTextNode("Water");  // Create a text node
newItem.appendChild(textnode);                    // Append the text to <li>

var list = document.getElementById("myList");    // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);  // Insert <li> before the first child of <ul>

https://www.w3schools.com/jsref/met_node_insertbefore.asp

0
Ilker Cat

Ich habe diesen Prototyp erstellt, um dem übergeordneten Element Elemente voranzustellen.

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
0
Raza