Javascript добавить ребенка после элемента [дубликат]

Question

Javascript добавить ребенка после элемента [дубликат]

этот вопрос уже есть ответ здесь:

Как вставить элемент после другого элемента в JavaScript без использования библиотеки?

17 ответов

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

695 6

javascript getelementbyid appendchild

6 ответов:

Comments

Ничего не найдено.

Yoshi · Accepted Answer · 2014-03-27 09:49:24

Вы можете использовать:
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);

vitalikaz · Accepted Answer · 2016-03-20 00:57:52

вам нужно добавить новый элемент к существующему родительскому элементу перед следующим родителем элемента. Например:
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);

Meligy · Accepted Answer · 2016-09-25 22:37:13

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

что-то типа:
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
обратите внимание, что значение по умолчанию nextSibling - это null, так что вам не нужно делать ничего особенного для этого.

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

ссылки:

nextSibling

insertBefore

.

если вы используете jQuery (игнорируйте в противном случае, я указал простой ответ JS выше), вы можете использовать удобный after() способ:
$("#one").after("<li id='two'>");
ссылки:

jQuery и после()

HBP · Accepted Answer · 2011-08-31 18:07:14

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

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

nathnolt · Accepted Answer · 2015-11-19 17:52:12

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

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

Sagar V · Accepted Answer · 2017-07-20 16:52:11

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

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

цитируя MDN

The 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>
в сниппете я использовал другой термин добавить слишком