Javascript Append Child AFTER Element

Я хотел бы добавить элемент 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>

Ответ 1

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

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

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

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

Ответ 2

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

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);

Ответ 3

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

Что-то вроде:

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

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

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

Ссылка:

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

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

Ссылка:

jQuery after()

Ответ 4

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

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

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

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

Ответ 5

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

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

или

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

Ответ 6

На этом есть интересный пост Дастин Диаз:

"Насколько мне известно, Джереми Кейт, похоже, придумал эту идею, хотя можно было подумать, что это тоже будет основной метод DOM. Но так же, как getElementsByClass, это не так. Вместо того, чтобы вытаскивать функцию прямо из книги, я оставлю это для вас, чтобы купить ее самостоятельно. Вместо этого я вытащил этот простой метод из общественного достояния":

function insertAfter(parent, node, referenceNode) {

    parent.insertBefore(node, referenceNode.nextSibling);

}

Ответ 7

после теперь метод JavaScript

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

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

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

Поддержка браузера - 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>