Wie setze ich das DOM-Element als erstes untergeordnetes Element?

Lesezeit: 5 Minuten

Benutzer-Avatar
Popara

Ich habe ein Element E und hänge einige Elemente daran an. Plötzlich finde ich heraus, dass das nächste anzuhängende Element das erste Kind von E sein sollte. Was ist der Trick, wie macht man das? Die Methode unshift funktioniert nicht, weil E ein Objekt und kein Array ist.

Ein langer Weg wäre es, die Kinder von E zu durchlaufen und sie mit key++ zu verschieben, aber ich bin sicher, dass es einen schöneren Weg gibt.

  • Ihr seid schnell! 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 passen muss. prepend würde child-el_4 voranstellen [b]e[/b]bin ich falsch und müde oder was?

    – Popara

    5. Januar 2010 um 16:35 Uhr

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

  • Du, mein Freund, hast dir gerade einen Bären zugelegt! Nützliche zusätzliche Entdeckung. docs.jquery.com/Manipulation/insertBefore

    – Popara

    5. Januar 2010 um 17:02 Uhr

  • Zur Info, wenn es kein Element im Elternteil gibt, wird das Kind trotzdem hinzugefügt.

    – Knü

    12. April 2014 um 21:28 Uhr

  • Im Fall von firstChild löst der Textknoten eine Ausnahme aus. aber jquery prepend dousn’t.

    – Sergej Sahakyan

    3. Oktober 2016 um 16:40 Uhr

  • @Sergey, funktioniert bei mir auch mit Textknoten, getestet auf Firefox und Chromium. Welchen Browser hast du verwendet? Sind Sie sicher, dass das Problem nicht auf Ihrer Seite lag? Möchten Sie ein Snippet/jsfiddle vorbereiten, das das Problem reproduziert?

    – Benutzer

    8. Dezember 2016 um 15:19 Uhr

  • list.outerHTML = Eintrag.outerHTML + list.outerHTML; Hoffnung hilft jemandem.

    – Deniz Porsuk

    21. September 2018 um 7:59 Uhr

Benutzer-Avatar
Gibolt

Version 2018 – prepend

parent.prepend(newChild)  // [newChild, child1, child2]

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

Das Äquivalent zum Hinzufügen am Ende ist appendersetzt die alte appendChild

parent.append(newChild)  // [child1, child2, newChild]

Erweiterte Nutzung

  1. Sie können mehrere Werte übergeben (oder den Spread-Operator verwenden ...).
  2. Jeder Zeichenfolgenwert wird als Textelement hinzugefügt.

Beispiele:

parent.prepend(newChild, "foo")   // [newChild, "foo", child1, child2]

const list = ["bar", newChild]
parent.append(...list, "fizz")    // [child1, child2, "bar", newChild, "fizz"]

Verwandte DOM-Methoden

  1. Weiterlesen – child.before und child.after
  2. Weiterlesen – child.replaceWith

Mozilla-Dokumentation

Kann ich benutzen

  • Tolle Lösung, danke! Es ärgert mich, dass sie entschieden haben, am Ende ein Kind hinzuzufügen .appendChild() aber es am Anfang hinzuzufügen ist .prepend() anstatt sich an Konventionen zu halten und sie zu nennen .prependChild()

    – Marquizzo

    26. Juli 2019 um 0:30 Uhr

  • append() gibt es auch, funktioniert genauso wie prepend()aber am Ende

    – Gibolt

    26. Juli 2019 um 6:39 Uhr

  • Ich war auch verwirrt, als ich diese Fragen zur Implementierung sah prepend dabei fand ich es schon so. 🙁 Ok, das gab es früher nicht.

    – Rick

    25. Oktober 2019 um 13:29 Uhr

  • @Marquizzo, warum nicht verwenden append? Offensichtlich für Rückenkompatibilität appendChild konnte nicht einfach entfernt werden.

    – Schrittmacher

    2. August 2020 um 13:35 Uhr


Benutzer-Avatar
pery mimon

2017-Version

Sie können verwenden

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

Aus MDN :

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

Position

Ein DOMString, der die Position relativ zum Element darstellt; muss einer der folgenden Strings sein:
beforebegin: Vor dem Element selbst.
afterbegin: Direkt innerhalb des Elements, vor seinem ersten Kind.
beforeend: Direkt innerhalb des Elements, nach seinem letzten Kind.
afterend: Nach dem Element selbst.

Element

Das Element, das in die Struktur eingefügt werden soll.

In der Familie von insertAdjacent es gibt die Geschwistermethoden:

element.insertAdjacentHTML('afterbegin','htmlText')`

Das kann HTML-String direkt injizieren, wie innerHTML aber ohne alles zu überschreiben, also kann man es als Mini-Template Engin verwenden und den drückenden Prozess überspringen document.createElement und sogar eine ganze Komponente mit String-Manipulationsprozess erstellen

element.insertAdjacentText für inject sanitize string in element . nicht mehr encode/decode

  • Toller Vorschlag, aber warum “zurück zu 2017”, dies ist eine Standardmethode, sogar auf ie8

    – Vitaliy Terziev

    18. Mai 2017 um 13:28 Uhr

  • Danke. und nochmals vielen Dank für Ihre Einsicht. Der Titel soll Menschen dabei helfen, schnell zu unterscheiden, was eine neue Antwort ist

    – pery mimon

    19. Mai 2017 um 15:47 Uhr

  • Was ist, wenn element = document.importNode(documentfragment, true)?

    – Martin Meerer

    8. Februar 2018 um 9:27 Uhr

  • diese Rückkehr element Art der document-fragment die nicht haben insertAdjacent...(). bis wir eine bessere Antwort haben, ist es am besten, die anzuhängen fragment zu einem div . Machen Sie Ihre Dom-Manipulation und verwenden Sie sie dann Range.selectNodeContents() und Range.extractContents() um ein Fragment zurück zu bekommen

    – pery mimon

    18. Februar 2018 um 23:17 Uhr


  • wobei ‘element’ das Element ist, das Sie hinzufügen möchten, und ‘element’ das Element ist, das Sie hinzufügen möchten;)

    – Bokkie

    17. April 2018 um 10:32 Uhr

Benutzer-Avatar
yorg

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

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

Benutzer-Avatar
Josef Dykstra

Akzeptierte Antwort in eine Funktion umgestaltet:

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

  • +1 für die Verwendung der Eltern-Kind-Beziehung. Akzeptierte Antwort fehlt das. Ich muss wissen, was eElement ist, dass es Sinn macht. Und dafür muss ich die Frage lesen. Meistens überprüfe ich nur den Titel und gehe direkt zur Antwort, wobei ich die Fragendetails ignoriere.

    – akinuri

    10. Oktober 2017 um 7:49 Uhr

Benutzer-Avatar
James Weisemann

Falls ich es nicht falsch verstanden habe:

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

Oder

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

Obwohl es nach Ihrer Beschreibung so klingt, als wäre eine Bedingung daran geknüpft

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

  • +1 für die Verwendung der Eltern-Kind-Beziehung. Akzeptierte Antwort fehlt das. Ich muss wissen, was eElement ist, dass es Sinn macht. Und dafür muss ich die Frage lesen. Meistens überprüfe ich nur den Titel und gehe direkt zur Antwort, wobei ich die Fragendetails ignoriere.

    – akinuri

    10. Oktober 2017 um 7:49 Uhr

Benutzer-Avatar
Emil Vikström

Ich glaube du suchst die .voranstellen Funktion in jQuery. Beispielcode:

$("#E").prepend("<p>Code goes here, yo!</p>");

  • Ihr seid schnell! 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 passen muss. prepend würde child-el_4 voranstellen [b]e[/b]bin ich falsch und müde oder was?

    – Popara

    5. Januar 2010 um 16:37 Uhr

1018400cookie-checkWie setze ich das DOM-Element als erstes untergeordnetes Element?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy