243

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

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

— Popara
источник

1

Вы, ребята, быстрые! Извините, я думаю, что меня неправильно поняли. элемент e | - child-el_1 | - child-el_2 | - child-el_3 И затем следует child-el_4 ..., который должен соответствовать первому дочернему элементу. prepend положил бы child-el_4 перед [b] e [/ b], я не прав и устал или как?

— Попара

472

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

— nemisj
источник

3

Ты мой друг, только что получил себе медведя! Полезная дополнительная находка. docs.jquery.com/Manipulation/insertBefore

— Попара

79

Для информации, если в родительском элементе нет элемента, дочерний элемент будет добавлен в любом случае.

— Кну

В случае firstChild текстовый узел выдает исключение. но jquery не стоит.

— Сергей Саакян

3

@ Сергей, у меня тоже работает с текстовым узлом, проверено на Firefox и Chromium. Какой браузер вы использовали? Вы уверены, что проблема была не на вашей стороне? Не могли бы вы подготовить фрагмент / jsfiddle, который воспроизводит проблему?

— пользователь

list.outerHTML = entry.outerHTML + list.outerHTML; Надежда помогает кому-то.

— Дениз Порсук

106

Версия 2017

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

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

От MDN :

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

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

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

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

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

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

— мимон
источник

2

отличное предложение, но почему бы «вернуться к 2017 году», это стандартный метод даже на ie8

— Виталий Терзиев

Спасибо. и еще одно спасибо за ваше понимание. название для того, чтобы помочь людям быстро отличить это новый ответ

— Pery Mimon

Что если element = document.importNode (documentfragment, true)?

— Мартин Мизер

что возвращают elementtypeof, document-fragmentчего не имеют insertAdjacent...(). пока у нас нет лучшего ответа, вам лучше всего добавить fragmentк div. сделай свою манипуляцию Range.selectNodeContents()Range.extractContents()

— домом,

где «элемент» - это элемент, в который вы хотите добавить, а «элемент» - это элемент, который вы хотите добавить;)

— bokkie

96

Версия 2018

parentElement.prepend(newFirstChild)

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

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

parentElement.prepend('This text!')

developer.mozilla.org

Могу ли я использовать - 94% май 2020

Polyfill

— Gibolt
источник

6

Отличное решение, спасибо! Меня раздражает, что они решили добавить ребенка в конец, .appendChild()но добавить его в начало .prepend()вместо того, чтобы придерживаться соглашения и называть его.prependChild()

— Marquizzo

1

append()существует так же, работает так же, как prepend()и в конце

— Gibolt

1

Я также запутался, когда увидел эти вопросы, спрашивающие о реализации, prependхотя обнаружил, что это уже так. :( Хорошо, его не было в прошлом.

— Рик

10

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

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

— Йорг
источник

prependявляется эквивалентом JS ванили, без необходимости прототипа. Это будет стандарт в ES7, и вы должны использовать, если это возможно, для вашего приложения

— Gibolt

6

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

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

— Джозеф Дикстра
источник

+1 за использование родительских и дочерних отношений. В принятом ответе этого нет. Мне нужно знать, что eElementдля этого имеет смысл. И для этого мне нужно прочитать вопрос. Большую часть времени я просто проверяю заголовок и сразу перехожу к ответу, игнорируя детали вопроса.

— akinuri

4

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

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

Или

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

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

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

— Джеймс Уайзман
источник

+1 за $ версию! Я пишу jQuery extension func, поэтому я буду использовать нативную версию всякий раз, когда смогу по соображениям производительности, но это прекрасно!

— Тейлор Эвансон

Нет, он ищет JavaScript, а не jquery.

— vinyll

2

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

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

— Эмиль Викстрем
источник

Вы, ребята, быстрые! Извините, я думаю, что меня неправильно поняли. элемент e | - child-el_1 | - child-el_2 | - child-el_3 И затем следует child-el_4 ..., который должен соответствовать первому дочернему элементу. prepend положил бы child-el_4 перед [b] e [/ b], я не прав и устал или как?

— Попара

0

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

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

— Илкер кот
источник

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

Версия 2017

Версия 2018