E elementim var ve ona bazı elementler ekliyorum. Birdenbire, bir sonraki elementin E'nin ilk çocuğu olması gerektiğini anladım. Hile nedir, nasıl yapılır? Unshift yöntemi çalışmaz, çünkü E dizi değil, bir nesnedir.

Uzun yol, E'nin çocuklarından tekrarlamak ve anahtar ++ 'ı taşımaktır, ancak eminim ki daha güzel bir yol var.

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

2017 sürümü

Kullanabilirsiniz

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

Gönderen MDN'yi :

İnsertAdjacentElement () yöntemi, belirli bir öğeyi çağrıldığı öğeye göre belirli bir konuma ekler.

konum
Elemana göre konumu temsil eden bir DOMString; şu dizelerden biri olmalıdır
beforebegin:: Öğenin kendisinden önce.
afterbegin: Elemanın hemen içinde, ilk çocuğundan önce.
beforeend: Elemanın hemen içinde, son çocuğundan sonra.
afterend: Elemanın kendisinden sonra.

element
Ağaca eklenecek öğe.

Ayrıca ailesinde insertAdjacentkardeş yöntemleri vardır:

element.insertAdjacentHTML('afterbegin','htmlText')html dizesini doğrudan enjekte etmek için, innerHTMLancak her şeyi geçersiz kılmaksızın, böylece baskıcı süreci atlayabilir document.createElementve hatta dize manipülasyon işlemi ile tüm bileşenleri bile oluşturabilirsiniz.

element.insertAdjacentTextdize elemanına sterilize etmek için. daha fazla yokencode/decode

2018 sürümü

parentElement.prepend(newFirstChild)

Bu modern JS! Önceki seçeneklerden daha okunabilir. Şu anda Chrome, FF ve Opera'da kullanılabilir.

PS Doğrudan dizeleri başa ekleyebilirsiniz

parentElement.prepend('This text!')

developer.mozilla.org

Kullanabilir miyim -% 94 Mayıs 2020

polyfill

Tüm pencere html öğelerinize doğrudan uygulayabilirsiniz.
Bunun gibi :

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

Kabul edilen cevap bir işleve yeniden düzenlenmiştir:

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

Yanlış anlamadıysam:

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

Veya

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

Açıklamanızdan, bazı koşulların eklenmiş gibi görünse de,

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

Bence jQuery .prepend işlevini arıyorsunuz . Örnek kod:

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

Bu prototipi, elemanları üst öğeye yerleştirmek için oluşturdum.

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

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