Jak ustawić element DOM jako pierwsze dziecko?

Mam element E i dodaję do niego kilka elementów. Nagle dowiaduję się, że następnym elementem powinno być pierwsze dziecko E. Co to za sztuczka, jak to zrobić? Metoda unshift nie działa, ponieważ E jest obiektem, a nie tablicą.

Długa droga byłaby do iteracji dzieci E i do przenoszenia klucza++, ale jestem pewien, że jest ładniejszy sposób.

Author: Giuseppe Romagnuolo, 2010-01-05

9 answers

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

eElement.insertBefore(newFirstElement, eElement.firstChild);
 321
Author: nemisj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-05 16:35:09

Wersja 2017

Możesz użyć

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

From MDN :

Metoda insertAdjacentElement() wstawia węzeł danego elementu w danej pozycji względem elementu, na którym jest wywoływany.

Pozycja
DOMString reprezentujący pozycję względem elementu; musi być jednym z następujących łańcuchów:
beforebegin: przed samym żywiołem.
afterbegin: właśnie wewnątrz elementu, przed jego pierwszym dziecko.
beforeend: tylko wewnątrz elementu, po jego ostatnim dziecku.
afterend: Po samym elemencie.

Element
Element, który ma być wstawiony do drzewa.

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

element.insertAdjacentHTML('afterbegin','htmlText') dla inject html string bezpośrednio, jak innerHTML, ale bez nadmiaru wszystkiego, więc można przeskoczyć opresyjny proces document.createElement, a nawet zbudować cały componet z procesem manipulacji łańcuchem

element.insertAdjacentText do inject sanitize string into element . no more encode/decode

 49
Author: pery mimon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-16 14:04:35

Wersja 2018

parentElement.prepend(newFirstChild);
To jest nowoczesne JS! Jest bardziej czytelny niż poprzednie opcje. Jest obecnie dostępny w Chrome, FF i Opera.

P. S. możesz bezpośrednio poprzedzać stringi

parentElement.prepend('This text!');

Developer.mozilla.org

Czy Mogę Używać - 86% Październik 2018

Polyfill

 17
Author: Gibolt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-05 16:16:20

Możesz zaimplementować go bezpośrednio i wszystkie elementy HTML okna.
TAK:

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
 9
Author: yorg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-03 04:35:08

Zaakceptowana odpowiedź przekształcona w funkcję:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
 5
Author: Joseph Dykstra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-10 14:43:29

Chyba, że źle zrozumiałem:

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

Lub

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

Chociaż z twojego opisu wynika, że jest jakiś warunek, więc

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
 3
Author: James Wiseman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-05 16:23:27

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

$("#E").prepend("<p>Code goes here, yo!</p>");
 1
Author: Emil Vikström,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-05 16:23:22

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

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
 0
Author: Raza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-20 17:27:31
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
Author: Ilker Cat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-12 23:22:12