Как установить элемент DOM в качестве первого дочернего элемента?

У меня есть элемент E, и я добавляю к нему некоторые элементы. Вдруг я узнаю, что следующим элементом должен быть первый ребенок Е. В чем же фишка, как это сделать? Метод unshift не работает, потому что E-это объект, а не массив.

длинный путь состоял бы в том, чтобы перебирать детей E и перемещать их ключ++, но я уверен, что есть более красивый способ.

9 132
javascript arrays jquery dom elements

9 ответов:

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

eElement.insertBefore(newFirstElement, eElement.firstChild);
321

версия 2017

можно использовать 

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

С MDN:

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

позиция
Строка DOMString, представляющая позицию относительно элемента; должна быть одной из следующих строк:
beforebegin: перед элементом себя.
afterbegin: только внутри элемента, перед его первым дочерним элементом.
beforeend: только внутри элемента, после его последнего ребенка.
afterend: после самого элемента.

элемент
Элемент, который будет вставлен в дерево.

в семье insertAdjacent есть родственные методы:

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

element.insertAdjacentText для ввода санировать строку в элемент . нет больше encode/decode

49

версия 2018

parentElement.prepend(newFirstChild);

это современный JS! Это более читабельно, чем предыдущие варианты. В настоящее время он доступен в Chrome, FF и Opera.

P. S. Вы можете напрямую добавлять строки 

parentElement.prepend('This text!');

developer.mozilla.org

Могу Ли Я Использовать - 86% окт 2018

полифилл

17

вы можете реализовать его непосредственно я все ваши элементы html окна.
Вот так:

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

принятый ответ преобразован в функцию:

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

Если я не понял неправильно:

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

или

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

хотя это звучит как из вашего описания, что есть некоторые условия прилагается, так что

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

Я думаю, что вы ищете .добавить функция в jQuery. Пример кода:

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

Я создал этот прототип для добавления элементов к родительскому элементу.

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
0
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