Javascript Добавить дочерний элемент ПОСЛЕ элемента

Я хотел бы добавить элемент li после другого li внутри элемента ul, используя javascript. Это код, который у меня есть до сих пор.

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";

Я знаком с appendChild,

parentGuest.appendChild(childGuest);

Однако это добавляет новый элемент внутри другого, а не после. Как я могу добавить новый элемент после существующего? Спасибо.

<ul>
  <li id="one"><!-- where the new li is being put --></li>
  <!-- where I want the new li -->
</ul>

javascript getelementbyid appendchild createelement
person Wez    schedule 31.08.2011    source источник
comment
Покажите какой-нибудь html .. родитель ul или li?   -  person Jonah Katz    schedule 31.08.2011
comment
Я проголосовал за повторное открытие этого QA, потому что хочу добавить новый обновленный ответ, поскольку этот QA по-прежнему появляется в топе результатов поиска в Google.   -  person Qwerty    schedule 19.05.2020

Ответы (6)


arrow_upward
111
arrow_downward

Вы можете использовать:

if (parentGuest.nextSibling) {
  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
}
else {
  parentGuest.parentNode.appendChild(childGuest);
}

Но, как указал Павел, referenceElement может иметь значение null/undefined, и если да, то insertBefore ведет себя точно так же, как appendChild. Таким образом, следующее эквивалентно предыдущему:

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
person Yoshi    schedule 31.08.2011
comment
if-else не нужен: второй аргумент insertBefore может быть нулевым или неопределенным - person Pavel; 27.03.2014

arrow_upward
17
arrow_downward

Вам нужно добавить новый элемент к существующему родителю элемента перед следующим родственным элементом элемента. Нравиться:

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Или, если вы хотите просто добавить его, то:

var parentGuest = document.getElementById("one"); 
var childGuest = document.createElement("li"); 
childGuest.id = "two"; 
parentGuest.parentNode.appendChild(childGuest);
person vitalikaz    schedule 31.08.2011

arrow_upward
17
arrow_downward

Если вы ищете простое решение JS, вы просто используете insertBefore() вместо nextSibling.

Что-то типа:

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Обратите внимание, что значение по умолчанию для nextSibling равно null, поэтому для этого вам не нужно делать ничего особенного.

Обновление: вам даже не нужно if проверять наличие parentGuest.nextSibling, как это делает принятый в настоящее время ответ, потому что, если следующего брата нет, он вернет null, а передача null во 2-й аргумент insertBefore() означает : добавить в конце.

Ссылка:

.

ЕСЛИ вы используете jQuery (в противном случае игнорируйте, я указал простой ответ JS выше), вы можете использовать удобный метод after():

$("#one").after("<li id='two'>");

Ссылка:

person Meligy    schedule 31.08.2011
comment
извините мое невежество, но как это реализовать с помощью javascript? не могли бы вы показать, как это будет работать с моим текущим кодом, спасибо. - person Wez; 31.08.2011
comment
Я думаю, что если вы не используете для этого jQuery, то ответ Йоши правильный. Это также упоминается здесь netlobo.com/javascript-insertafter.html — я только что предположить, что jQuery является супер-умолчанием. Моя ошибка :D - person Meligy; 31.08.2011
comment
Полтора года спустя, и я получаю голосование за этот ответ. Итак, я обновил его, включив в него максимально короткую версию простого JS-решения и ссылку на документацию Mozilla. Извините, что не сделал этого раньше (поскольку другие уже сделали это с очень похожими реализациями, я не думал, что мне это нужно). - person Meligy; 19.03.2013

arrow_upward
1
arrow_downward

Этого достаточно:

 parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling || null);

поскольку, если refnode (второй параметр) равен нулю, выполняется обычный appendChild. см. здесь: http://reference.sitepoint.com/javascript/Node/insertBefore

На самом деле я сомневаюсь, что || null требуется, попробуйте и посмотрите.

person HBP    schedule 31.08.2011

arrow_upward
1
arrow_downward

after теперь является методом JavaScript

Документация по MDN

Цитирование MDN

Метод ChildNode.after() вставляет набор объектов Node или DOMString в список дочерних элементов родительского объекта ChildNode сразу после этого объекта ChildNode. Объекты DOMString вставляются как эквивалентные узлы Text.

Браузер поддерживает Chrome (54+), Firefox (49+) и Opera (39+). Он не поддерживает IE и Edge.

Фрагмент

var elm=document.getElementById('div1');
var elm1 = document.createElement('p');
var elm2 = elm1.cloneNode();
elm.append(elm1,elm2);

//added 2 paragraphs
elm1.after("This is sample text");
//added a text content
elm1.after(document.createElement("span"));
//added an element
console.log(elm.innerHTML);
<div id="div1"></div>

Во фрагменте я также использовал другой термин append.

person Sagar V    schedule 20.07.2017

arrow_upward
0
arrow_downward

Вы также можете сделать

function insertAfter(node1, node2) {
    node1.outerHTML += node2.outerHTML;
}

or

function insertAfter2(node1, node2) {
    var wrap = document.createElement("div");
    wrap.appendChild(node2.cloneNode(true));
    var node2Html = wrap.innerHTML;
    node1.insertAdjacentHTML('afterend', node2Html);
}
person nathnolt    schedule 19.11.2015