Wie setze ich das DOM-Element als erstes Kind?

243

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? Das Verschieben der Methode funktioniert nicht, da E ein Objekt und kein Array ist.

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

Popara
quelle
1
Ihr seid schnell! Es tut mir leid, ich glaube ich wurde missverstanden. Element e | - child-el_1 | - child-el_2 | - child-el_3 Und dann kommt child-el_4 ... das als erstes Kind fit sein muss. prepend würde child-el_4 vor [b] e [/ b] setzen, bin ich falsch und müde oder was?
Popara

Antworten:

472
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
nemisj
quelle
3
Du mein Freund, hast dir gerade einen Bären geholt! Nützlicher zusätzlicher Befund. docs.jquery.com/Manipulation/insertBefore
Popara
79
Für Informationen, wenn das übergeordnete Element kein Element enthält, wird das untergeordnete Element trotzdem hinzugefügt.
Knu
Im Fall von firstChild löst der Textknoten eine Ausnahme aus. aber jquery prepend nicht.
Sergey Sahakyan
3
@Sergey, funktioniert bei mir auch mit Textknoten, getestet auf Firefox und Chromium. Welchen Browser haben Sie verwendet? Sind Sie sicher, dass das Problem nicht auf Ihrer Seite war? Möchten Sie ein Snippet / jsfiddle vorbereiten, das das Problem reproduziert?
Benutzer
list.outerHTML = entry.outerHTML + list.outerHTML; Hoffnung hilft jemandem.
Deniz Porsuk
106

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, auf 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: Nur innerhalb des Elements, vor seinem ersten Kind.
beforeend: Nur innerhalb des Elements, nach seinem letzten Kind.
afterend: Nach dem Element selbst.

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

Auch in der Familie insertAdjacentgibt es die Geschwistermethoden:

element.insertAdjacentHTML('afterbegin','htmlText')für das direkte innerHTMLInjizieren von HTML-Zeichenfolgen, wie, aber ohne alles zu überschreiben, so dass Sie den Unterdrückungsprozess document.createElementüberspringen und sogar ganze Komponenten mit Zeichenfolgenmanipulationsprozessen erstellen können

element.insertAdjacentTextzum Injizieren von Desinfektionszeichenfolgen in Elemente. nicht mehrencode/decode

pery mimon
quelle
2
toller Vorschlag, aber warum "zurück zu 2017", dies ist eine Standardmethode sogar auf ie8
Vitaliy Terziev
Vielen Dank. und noch ein Dank für Ihren Einblick. Titel ist für die Hilfe Menschen schnell zu unterscheiden, das ist neue Antwort
Pery Mimon
Was ist, wenn element = document.importNode (documentfragment, true)?
Martin Meeser
diese Rückgabe elementTyp document-fragment, die nicht haben insertAdjacent...(). Bis wir eine bessere Antwort haben, ist es Ihre beste Vermutung, das fragmentan a anzuhängen div. Machen Sie Ihre Dom-Manipulation und verwenden Sie dann Range.selectNodeContents()und Range.extractContents()erhalten Sie ein Fragment
Pery Mimon
Dabei ist 'Element' das Element, zu dem Sie hinzufügen möchten, und 'Element' ist das Element, das Sie hinzufügen möchten.)
Bokkie
95

Version 2018

parentElement.prepend(newFirstChild)

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

PS Sie können Zeichenfolgen direkt voranstellen

parentElement.prepend('This text!')

developer.mozilla.org

Kann ich verwenden - 94% Mai 2020

Polyfill

Gibolt
quelle
6
Tolle Lösung, danke! Es ärgert mich, dass sie beschlossen haben, ein Kind am Ende .appendChild()hinzuzufügen, aber es am Anfang hinzuzufügen, .prepend()anstatt sich an die Konvention zu halten und sie zu nennen.prependChild()
Marquizzo
1
append()existiert auch, funktioniert genauso wie prepend(), aber am Ende
Gibolt
1
Ich war auch verwirrt, als ich diese Fragen zur Implementierung sah, prependwährend ich feststellte, dass es das schon war. :( Ok, es gab es in der Vergangenheit nicht.
Rick
10

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

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
yorg
quelle
prependist das Vanille-JS-Äquivalent, ohne dass ein Prototyp benötigt wird. Es wird Standard in ES7 sein, und Sie sollten es nach Möglichkeit für Ihre Anwendung verwenden
Gibolt
6

Akzeptierte Antwort in eine Funktion umgestaltet:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
Joseph Dykstra
quelle
+1 für die Verwendung der Eltern-Kind-Beziehung. Akzeptierte Antwort fehlt das. Ich muss wissen, was eElementSinn macht. Und dafür muss ich die Frage lesen. Meistens überprüfe ich nur den Titel und gehe direkt zur Antwort, wobei ich die Details der Frage ignoriere.
Akinuri
4

Es sei denn, ich habe falsch verstanden:

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

Oder

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

Obwohl es aus Ihrer Beschreibung so klingt, als ob eine Bedingung damit verbunden ist, so

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
James Wiseman
quelle
+1 für die $ -Version! Ich schreibe eine jQuery-Erweiterungsfunktion, daher werde ich aus Leistungsgründen die native Version verwenden, wann immer ich kann, aber das ist perfekt!
Taylor Evanson
Na, er sucht nach JavaScript, nicht nach jquery.
Vinyll
2

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

$("#E").prepend("<p>Code goes here, yo!</p>");
Emil Vikström
quelle
Ihr seid schnell! Es tut mir leid, ich glaube ich wurde missverstanden. Element e | - child-el_1 | - child-el_2 | - child-el_3 Und dann kommt child-el_4 ... das als erstes Kind fit sein muss. prepend würde child-el_4 vor [b] e [/ b] setzen, bin ich falsch und müde oder was?
Popara
0

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

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
Raza
quelle
0
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

Ilker Cat
quelle