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.
9 answers
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
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
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!');
Czy Mogę Używać - 86% Październik 2018
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);
};
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)
}
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>");
}
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>");
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;
};
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>
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