У мене є елемент Е, і я додаю до нього деякі елементи. Раптом я дізнаюсь, що наступним елементом має стати перша дитина Е. Яка хитрість, як це зробити? Незмінний спосіб не працює, оскільки E - це об'єкт, а не масив.

Довгий шлях був би пройти через дітей Е і перейти до клавіші ++, але я впевнений, що є гарніший спосіб.

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

Версія 2017 року

Можна використовувати

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

Від MDN :

Метод insertAdjacentElement () вставляє заданий вузол елемента у заданому положенні відносно елементу, на який він викликається.

позиція
A DOMString, що представляє положення відносно елемента; повинен бути один із наступних рядків
beforebegin:: Перед самим елементом.
afterbegin: Просто всередині елемента, перед його першою дитиною.
beforeend: Просто всередині елемента, після останньої дитини.
afterend: Після самого елемента.

елемент
Елемент, який потрібно вставити в дерево.

Також в родині insertAdjacentє методи братів і сестер:

element.insertAdjacentHTML('afterbegin','htmlText')вводити HTML-рядок безпосередньо, як, innerHTMLале без перекриття всього, так що ви можете стрибати гнітючий процес document.createElementі навіть будувати цілий компонет за допомогою маніпуляції з рядком

element.insertAdjacentTextдля ін'єкції санітизувати рядок в елемент. не більшеencode/decode

2018 версія

parentElement.prepend(newFirstChild)

Це сучасний JS! Він легше читається, ніж попередні варіанти. Наразі він доступний у Chrome, FF та Opera.

PS Ви можете безпосередньо додати рядки

parentElement.prepend('This text!')

developer.mozilla.org

Чи можу я використовувати - 94% травня 2020 року

Поліфіл

Ви можете реалізувати його безпосередньо i всі елементи html вашого вікна.
Подобається це :

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

Прийнята відповідь відновлена ​​у функції:

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

Якщо я не зрозумів неправильно:

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

Або

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

Хоча з вашого опису це здається, що додається якась умова, тож

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

Я думаю, ви шукаєте функцію .prepend в jQuery. Приклад коду:

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

Я створив цей прототип для додавання елементів до батьківського елемента.

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