我想使用 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);
请注意，默认值为nextSiblingis null，因此您无需为此做任何特别的事情。
更新：您甚至不需要像当前接受的答案那样if检查是否存在parentGuest.nextSibling，因为如果没有下一个兄弟姐妹，它将 return null，并传递null给 mean insertBefore(): append 在最后的第二个参数。
参考：
.
如果您使用的是 jQuery（否则请忽略，我在上面已经说明了简单的 JS 答案），您可以利用方便的after()方法：
$("#one").after("<li id='two'>");
参考：
这足够了：
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling || null);
因为如果refnode（第二个参数）为空，则执行常规的 appendChild。见这里：http : //reference.sitepoint.com/javascript/Node/insertBefore
其实我怀疑这|| null是必需的，试试看。
引用 MDN
该
ChildNode.after()方法DOMString在 thisChildNode的父级的子级列表中插入一组 Node 或对象，就在 this 之后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>在片段中，我用另一个词追加太