小开

您需要在元素的下一个兄弟元素之前将新元素追加到现有元素的父元素:

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

小开

最佳答案

你可使用:

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

但是正如 Pavel 所指出的，ReferenceElement 参考元素可以是 null/未定义的，如果是这样，那么插入前的行为就像附件儿童一样。因此，下面的内容与上面的内容相同:

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

小开

如果您正在寻找一个普通的 JS 解决方案，那么您只需对 nextSibling使用 insertBefore()即可。

比如:

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

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

更新: 你甚至不需要像当前接受的答案那样检查 parentGuest.nextSibling是否存在，因为如果没有下一个兄弟姐妹，它将返回 null，并将 null传递给 insertBefore()的第二个参数意味着: 在结尾处附加。

参考文献:

.

如果您正在使用 jQuery (忽略其他内容，我在上面已经说明了普通的 JS 答案) ，您可以利用方便的 after()方法:

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

参考文献:

()之后的 jQuery

小开

这就足够了:

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

因为如果 refnode(第二个参数)为 null，那么就会执行一个常规的 appChild

实际上我怀疑 || 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()方法将一组 Node 或 DOMString对象插入到这个 ChildNode的父对象的子对象列表中，就在这个 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>

In the snippet, I used another term append too

元素后追加子元素

After 现在是一个 JavaScript 方法

片段