Javascript在元素后附加Child

Question

我想在一个ul元素中使用javascript追加一个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,并传递null给第二个参数insertBefore()意味着:追加到最后.

参考:

• nextSibling
• 的insertBefore

.

如果你正在使用jQuery(否则,我已经说过上面的简单JS答案),你可以利用方便的after()方法:

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

参考:

• jQuery之后()

Answer 4

after 现在是一个 JavaScript 方法

MDN 文档

引用MDN

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

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

在代码片段中，我也使用了另一个术语“附加”