Cum se stabilește elementul DOM ca fiind primul copil? (Programare, Javascript, Jquery, Array-Uri, Dom, Elemente)

Popara a intrebat.

Am elementul E și îi adaug câteva elemente. Dintr-o dată, aflu că următorul element ar trebui să fie primul copil al lui E. Care este șmecheria, cum să fac asta? Metoda unshift nu funcționează pentru că E este un obiect, nu un array.

Cea mai lungă cale ar fi să iterăm printre copiii lui E și să îi mutăm cu tasta++, dar sunt sigur că există o cale mai frumoasă.

Comentarii

  • Sunteți rapizi! Îmi pare rău, cred că am fost înțeles greșit. element e |- child-el_1 |- child-el_2 |- child-el_3 Și apoi vine child-el_4 … care trebuie să fie încadrat ca primul copil. prepend ar pune child-el_4 înainte de [b]e[/b], mă înșel și sunt obosit sau ce?  > Por Popara.
9 răspunsuri
nemisj
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);

Comentarii

  • Tu, prietene, tocmai ți-ai luat un ursuleț! Descoperire suplimentară utilă. docs.jquery.com/Manipulare/insertBefore –  > Por Popara.
  • 92

  • Pentru informații, dacă nu există niciun element în părinte, copilul va fi adăugat oricum. –  > Por Knu.
  • În cazul în care firstChild este text node aruncă o excepție. dar jquery prepend nu o face. –  > Por Sergey Sahakyan.
  • @Sergey, funcționează și pentru mine cu nodul text, testat pe Firefox și Chromium. Ce browser ai folosit? Ești sigur că problema nu a fost de partea ta? Ai vrea să pregătești un fragment/jsfiddle care să reproducă problema? –  > Por utilizator.
  • list.outerHTML = entry.outerHTML + list.outerHTML; Sper să ajute pe cineva. –  > Por Deniz Porsuk.
Gibolt

Versiunea 2018 – prepend

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

Acesta este un JS modern! Este mai ușor de citit decât opțiunile anterioare. În prezent, este disponibil în Chrome, FF și Opera.

Echivalentul pentru adăugarea la sfârșit este append, , înlocuind vechiul appendChild

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

Utilizare avansată

  1. Puteți trece mai multe valori (sau puteți utiliza operatorul de răspândire ...).
  2. Orice valoare de tip șir de caractere va fi adăugată ca element de text.

Exemple:

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

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

Metode DOM conexe

  1. Citiți mai mult – child.before și child.after
  2. Citește mai mult – child.replaceWith

Documentația Mozilla

Pot utiliza

Comentarii

    15

  • O soluție excelentă, mulțumesc! Mă irită faptul că au decis că adăugarea unui copil la sfârșit este .appendChild() dar adăugarea la început este .prepend() în loc să respecte convenția și să o numească .prependChild() –  > Por Marquizzo.
  • append() există și el, funcționează la fel ca prepend(), , dar la sfârșit –  > Por Gibolt.
  • Și eu am rămas confuz când am văzut aceste întrebări care cereau implementarea prepend în timp ce am constatat că a fost deja asta. 🙁 Ok, nu a existat în trecut. –  > Por Rick.
  • @Marquizzo, De ce nu folosiți append? Pentru backcompat, evident appendChild nu poate fi eliminat pur și simplu. –  > Por Pacerier.
pery mimon

Versiunea 2017

Puteți folosi

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

De la MDN :

Metoda insertAdjacentElement() inserează un anumit nod de element într-o anumită poziție în raport cu elementul asupra căruia este invocată.

poziție
Un DOMString care reprezintă poziția în raport cu elementul; trebuie să fie unul dintre următoarele șiruri de caractere:
beforebegin: Înaintea elementului însuși.
afterbegin: Chiar în interiorul elementului, înainte de primul său copil.
beforeend: Chiar în interiorul elementului, după ultimul său copil.
afterend: După elementul propriu-zis.

element
Elementul care urmează să fie inserat în arbore.

De asemenea, în familia insertAdjacent există metodele de frați și surori:

element.insertAdjacentHTML('afterbegin','htmlText') pentru a injecta direct un șir de caractere html, cum ar fi innerHTML dar fără a suprascrie totul , astfel încât să puteți sări peste procesul opresiv de document.createElement și chiar să construiți un întreg element cu procesul de manipulare a șirurilor de caractere.

element.insertAdjacentText pentru a injecta șirul de caractere de igienizare în element . nu mai mult encode/decode

Comentarii

  • mare sugestie, dar de ce „înapoi în 2017”, aceasta este o metodă standard chiar și pe ie8 –  > Por Vitaliy Terziev.
  • mulțumesc. și încă un mulțumesc pentru intuiția dvs. titlul este pentru a ajuta oamenii să distingă rapid că este noul răspuns –  > Por pery mimon.
  • Ce se întâmplă dacă element = document.importNode(documentfragment, true)? –  > Por Martin Meeser.
  • care returnează element typeof document-fragment care nu are insertAdjacent...(). până nu avem un răspuns mai bun, cea mai bună variantă este să adăugați la fragment la un div . faceți manipularea dom și apoi utilizați Range.selectNodeContents() și Range.extractContents() pentru a obține înapoi un fragment –  > Por pery mimon.
  • unde ‘element’ este elementul în care doriți să adăugați, iar ‘element’ este elementul pe care doriți să îl adăugați 😉 –  > Por bokkie.
yorg

Puteți să o implementați direct i toate elementele html ale ferestrei dvs.
Astfel :

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

Comentarii

  • prepend este echivalentul vanilla JS, fără a avea nevoie de un prototip. Va fi standard în ES7 și ar trebui să îl folosiți, dacă este posibil, pentru aplicația dumneavoastră –  > Por Gibolt.
Joseph Dykstra

Răspuns acceptat refactorizat într-o funcție:

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

Comentarii

  • +1 pentru utilizarea relației părinte-copil. Răspunsului acceptat îi lipsește acest lucru. Am nevoie să știu ce eElement este pentru a avea sens. Și pentru asta, trebuie să citesc întrebarea. De cele mai multe ori, verific doar titlul și trec direct la răspuns, ignorând detaliile întrebării. –  > Por akinuri.
James Wiseman

Dacă nu cumva am înțeles eu greșit:

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

Sau

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

Deși din descrierea dvs. se pare că există o anumită condiție atașată, deci

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

Comentarii

  • +1 pentru versiunea în dolari! Scriu o funcție jQuery extend, așa că voi folosi versiunea nativă ori de câte ori pot din motive de performanță, dar asta e perfect! –  > Por Taylor Evanson.
  • Na, el caută JavaScript, nu jquery. –  > Por vinyll.
Emil Vikström

Cred că sunteți în căutarea .prepend din jQuery. Exemplu de cod:

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

Comentarii

  • Sunteți rapizi! Îmi pare rău, cred că am fost înțeles greșit. element e |- child-el_1 |- child-el_2 |- child-el_3 Și apoi vine child-el_4 … care trebuie să fie încadrat ca primul copil. prepend ar pune child-el_4 înaintea lui [b]e[/b], greșesc și sunt obosit sau ce?  > Por Popara.
Raza

Am creat acest prototip pentru a prependa elementele la elementul părinte.

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

Ilker Cat
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