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>
60
appendchild createelement getelementbyid javascript

6 ответов

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

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

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

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

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

что-то типа:

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

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

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

ссылки:

.

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

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

ссылки:

14

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

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

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

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

1

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

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

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

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

цитируя MDN

на ChildNode.after() метод вставляет набор узлов или DOMString объекты в списке детей этого ChildNodeродитель, сразу после этого ChildNode. Виде domstring. объекты вводятся как эквивалент текста узлов.

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

фрагмент

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>

в фрагменте я использовал другой термин добавить слишком

0