之后现在是一个JavaScript方法

Question

我想使用javascript在ul元素中追加一个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的状态，就像当前接受的答案一样，因为如果没有下一个兄弟，它将返回{ {1}}，并将null传递给null的第二个参数意味着：追加到最后。

参考：

如果你正在使用jQuery（我忽略了，我已经在上面说过了简单的JS答案），你可以利用方便的insertBefore()方法：

after()

参考：

jQuery after()

Answer 4

这就足够了：

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

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

实际上我怀疑|| null是必需的，试试看。

Answer 5

您也可以

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

Answer 6

之后现在是一个JavaScript方法

MDN Documentation

引用MDN

ChildNode.after()方法在此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>

在代码段中，我还使用了另一个术语append

Javascript在元素后附加Child

6 个答案:

之后现在是一个JavaScript方法

段