Jak ustawić element DOM jako pierwsze dziecko?

243

Mam element E i dołączam do niego niektóre elementy. Nagle dowiaduję się, że następnym elementem powinno być pierwsze dziecko E. Jaka jest sztuczka, jak to zrobić? Metoda unshift nie działa, ponieważ E jest obiektem, a nie tablicą.

Dalszą drogą byłoby powtarzanie dzieci E i przenoszenie klucza ++, ale jestem pewien, że jest ładniejszy sposób.

Popara
źródło
1
Jesteście szybcy! Przepraszam, myślę, że zostałem źle zrozumiany. element e | - child-el_1 | - child-el_2 | - child-el_3 A potem pojawia się child-el_4 ... które musi być dostosowane jako pierwsze dziecko. prepend umieściłoby child-el_4 przed [b] e [/ b], czy się mylę i jestem zmęczony czy co?
Popara,

Odpowiedzi:

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

eElement.insertBefore(newFirstElement, eElement.firstChild);
nemisj
źródło
3
Ty mój przyjacielu, właśnie masz niedźwiedzia! Przydatne dodatkowe znalezisko. docs.jquery.com/Manipulation/insertBefore
Popara
79
Dla informacji, jeśli element nadrzędny nie ma elementu, dziecko i tak zostanie dodane.
Knu
W przypadku firstChild węzeł tekstowy zgłasza wyjątek. ale jquery nie musi.
Sergey Sahakyan
3
@Sergey, działa również dla mnie z węzłem tekstowym, przetestowane na Firefox i Chromium. Z jakiej przeglądarki korzystałeś? Czy jesteś pewien, że problem nie był po twojej stronie? Czy chciałbyś przygotować fragment kodu / jsfiddle, który odtwarza problem?
użytkownik
list.outerHTML = entry.outerHTML + list.outerHTML; Nadzieja pomaga komuś.
Deniz Porsuk
106

Wersja 2017

Możesz użyć

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

Z MDN :

Metoda insertAdjacentElement () wstawia dany węzeł elementu w danej pozycji w stosunku do elementu, na który jest wywoływany.

pozycja
Ciąg DOMString reprezentujący pozycję względem elementu; musi być jednym z następujących ciągów
beforebegin:: Przed samym elementem.
afterbegin: Tuż wewnątrz elementu, przed jego pierwszym dzieckiem.
beforeend: Tuż w elemencie, po jego ostatnim dziecku.
afterend: Po samym elemencie.

element
Element do wstawienia do drzewa.

Również w rodzinie insertAdjacentsą metody rodzeństwa:

element.insertAdjacentHTML('afterbegin','htmlText')do wstrzykiwania łańcucha HTML bezpośrednio, innerHTMLale bez przesłonięcia wszystkiego, dzięki czemu można przeskoczyć uciążliwy proces, document.createElementa nawet budować cały element za pomocą procesu manipulacji ciągiem

element.insertAdjacentTextdo wstrzykiwania odkażającego łańcucha do elementu. już nieencode/decode

pery mimon
źródło
2
świetna sugestia, ale dlaczego „powrót do 2017 roku”, jest to standardowa metoda nawet na ie8
Witalij Terziew
dzięki. i jeszcze raz dziękuję za wgląd. tytuł jest za pomoc ludziom w szybkim rozróżnianiu, to jest nowa odpowiedź
pery mimon
Co jeśli element = document.importNode (documentfragment, true)?
Martin Meeser,
że powrót elementtypeof document-fragment, że nie mają insertAdjacent...(). dopóki nie znajdziemy lepszej odpowiedzi, najlepiej zgadnąć, czy dołączyć fragmentdo div. dokonaj manipulacji domem, a następnie użyj Range.selectNodeContents()i, Range.extractContents()aby odzyskać fragment
pery mimon
gdzie „element” to element, do którego chcesz dodać, a „element” to element, który chcesz dodać;)
bokkie
96

Wersja 2018

parentElement.prepend(newFirstChild)

To jest nowoczesny JS! Jest bardziej czytelny niż poprzednie opcje. Jest obecnie dostępny w Chrome, FF i Operze.

PS Możesz bezpośrednio poprzedzać ciągi

parentElement.prepend('This text!')

developer.mozilla.org

Czy mogę korzystać - 94% maja 2020 r

Polyfill

Gibolt
źródło
6
Świetne rozwiązanie, dzięki! Denerwuje mnie, że postanowili dodać dziecko na końcu, .appendChild()ale dodanie go na początku jest .prepend()zamiast trzymania się konwencji i nazywania tego.prependChild()
Marquizzo
1
append()istnieje, działa tak samo jak prepend(), ale na końcu
Gibolt
1
Byłem również zdezorientowany, kiedy zobaczyłem te pytania dotyczące wdrażania, prependgdy odkryłem, że już tak było. :( Ok, nie istniał w przeszłości.
Rick,
10

Możesz zaimplementować go bezpośrednio we wszystkich elementach HTML okna.
Lubię to :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
Yorg
źródło
prependjest waniliowym odpowiednikiem JS, bez potrzeby prototypu. Będzie to standard w ES7, a jeśli to możliwe, powinieneś użyć go
Gibolt,
6

Zaakceptowana odpowiedź została przekształcona w funkcję:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
Joseph Dykstra
źródło
+1 za korzystanie z relacji rodzic-dziecko. W zaakceptowanej odpowiedzi brakuje tego. Muszę wiedzieć, co eElementto ma sens. I w tym celu muszę przeczytać pytanie. Przez większość czasu po prostu sprawdzam tytuł i idę bezpośrednio do odpowiedzi, ignorując szczegóły pytania.
akinuri,
4

Chyba że źle zrozumiałem:

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

Lub

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

Chociaż z twojego opisu wygląda na to, że istnieje jakiś warunek, tak

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
James Wiseman
źródło
+1 dla wersji $! Piszę rozszerzenie jQuery, więc użyję wersji natywnej, kiedy tylko mogę, ze względu na wydajność, ale jest to idealne!
Taylor Evanson
Nie, szuka JavaScript, a nie jquery.
vinyll
2

Myślę, że szukasz funkcji .prepend w jQuery. Przykładowy kod:

$("#E").prepend("<p>Code goes here, yo!</p>");
Emil Vikström
źródło
Jesteście szybcy! Przepraszam, myślę, że zostałem źle zrozumiany. element e | - child-el_1 | - child-el_2 | - child-el_3 A potem pojawia się child-el_4 ... które musi być dostosowane jako pierwsze dziecko. prepend umieściłoby child-el_4 przed [b] e [/ b], czy się mylę i jestem zmęczony czy co?
Popara,
0

Stworzyłem ten prototyp, aby dodawać elementy do elementu nadrzędnego.

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
Raza
źródło
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
źródło