Ответ 1
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
У меня есть элемент E, и я добавляю к нему некоторые элементы. Внезапно я узнаю, что следующий элемент должен быть первым ребенком Е. Какой трюк, как это сделать? Метод unshift не работает, потому что E - это объект, а не массив.
Долгий путь - это перебирать дочерние элементы E и перетаскивать ключ ++, но я уверен, что есть более красивый способ.
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
Вы можете использовать
targetElement.insertAdjacentElement('afterbegin', newFirstElement)
Из MDN:
Метод insertAdjacentElement() вставляет данный узел элемента в заданную позицию относительно элемента, к которому он вызывается.
должность
DOMString, представляющая позицию относительно элемента; должна быть одной из следующих строк:beforebegin
: Перед самим элементом.afterbegin
: Только внутри элемента, перед его первым ребенком.beforeend
: Только внутри элемента, после его последнего ребенка.afterend
: После самого элемента.элемент
Элемент, который нужно вставить в дерево.
Также в семействе insertAdjacent
есть методы брата и сестры:
element.insertAdjacentHTML('afterbegin','htmlText')
для прямой вставки html строки, например innerHTML
но без переопределения всего, поэтому вы можете пересказывать репрессивный процесс document.createElement
и даже построить целый компонент с процессом манипуляции строкой
element.insertAdjacentText
для инъекции дезинфицировать строку в элемент. больше не encode/decode
parentElement.prepend(newFirstChild);
Это современный JS! Это более читабельно, чем предыдущие варианты. В настоящее время он доступен в Chrome, FF и Opera.
Постскриптум Вы можете напрямую добавлять строки
parentElement.prepend('This text!');
Могу ли я использовать - 91%, июль 2019 г.
Вы можете реализовать его непосредственно во всех ваших элементах 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>