我想使用javascript在ul元素内的另一个li后面附加一个li元素，这是我到目前为止的代码。

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>

您可以使用：

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

但是正如Pavel指出的那样，referenceElement可以为null / undefined，如果是，则insertBefore的行为就像appendChild一样。因此，以下内容等同于上述内容：

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

您需要在元素的下一个同级之前将新元素附加到现有元素的父元素上。喜欢：

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

如果您正在寻找普通的JS解决方案，则只需使用insertBefore()对nextSibling。

就像是：

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

请注意，默认值nextSibling是null，因此，您不需要为此做任何特殊的事情。

更新：你甚至都不需要if的检查存在parentGuest.nextSibling像目前接受的答案呢，因为如果没有下一个兄弟，它将返回null，并传递null到的第二个参数insertBefore()是指：追加在最后。

参考：

• nextSibling
• insertBefore

。

如果您使用的是jQuery（否则，请忽略上面的JS答案），您可以利用便捷的after()方法：

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

参考：

• jQuery after（）

这足以：

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

因为如果refnode（第二个参数）为null，则执行常规的appendChild。参见此处：http : //reference.sitepoint.com/javascript/Node/insertBefore

其实我怀疑|| null是否需要，请尝试一下。

你也可以

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

after是现在的JavaScript方法

MDN文档

报价MDN

该ChildNode.after()方法DOMString在此ChildNode父级的子级列表中插入一组Node或对象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>

在片段中，我用另一个词追加太