javascript - Javascript在元素之后附加子元素

Question

我想使用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>

Answer 1

您可以使用：

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

Answer 2

您需要在元素的下一个兄弟元素之前将新元素附加到现有元素的父元素。像：

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

Answer 3

如果您正在寻找一个简单的 JS 解决方案，那么您只需使用insertBefore()反对nextSibling.

就像是：

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

请注意，默认值为，nextSibling因此null，您无需为此做任何特别的事情。

更新：您甚至不需要像当前接受的答案那样if检查存在parentGuest.nextSibling，因为如果没有下一个兄弟，它将返回null，并传递给 mean : appendnull的第二个参数。insertBefore()

参考：

• 下一个兄弟姐妹
• 插入之前

.

如果您使用的是 jQuery（否则请忽略，我在上面已经说明了纯 JS 答案），您可以利用方便的after()方法：

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

参考：

• jQuery after()

Answer 4

这足够了：

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

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

其实我怀疑这|| null是必需的，试试看。

Answer 5

after 现在是一个 JavaScript 方法

MDN 文档

引用 MDN

该方法在 this的父级的子列表中ChildNode.after()插入一组 Node 或对象，就在 this 之后。DOMString 对象作为等效的 Text 节点插入。DOMStringChildNodeChildNode

浏览器支持 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>

在片段中，我也使用了另一个术语append

Answer 6

你也可以做

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