it-roy-ru.com

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

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

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

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

eElement.insertBefore(newFirstElement, eElement.firstChild);
357
nemisj

Версия 2017

Ты можешь использовать 

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

От MDN :

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

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

element
Элемент, который нужно вставить в дерево.

Также в семействе insertAdjacent есть родственные методы: 

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

element.insertAdjacentText для вставки очищающей строки в элемент. не более encode/decode

59
pery mimon

Версия 2018

parentElement.prepend(newFirstChild);

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

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

parentElement.prepend('This text!');

developer.mozilla.org

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

Полифилл

29
Gibolt

Вы можете реализовать это непосредственно во всех ваших оконных элементах HTML.
Как это :

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

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

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

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

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

Или же

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

Хотя из вашего описания звучит так, что есть какое-то условие, поэтому

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

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

$("#E").prepend("<p>Code goes here, yo!</p>");
1
Emil Vikström
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
Ilker Cat

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

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