Javascript Javascript在元素之后追加子元素

Javascript Append Child AFTER Element

提问by Wez

I would like to append an li element after another li inside a ul element using javascript, This is the code I have so far..

我想使用javascript在ul元素中的另一个li之后附加一个li元素，这是我迄今为止的代码..

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";

I am familiar with appendChild,

我熟悉appendChild，

parentGuest.appendChild(childGuest);

However this appends the new element inside the other, and not after. How can I append the new element after the existing one? Thanks.

但是，这会将新元素附加到另一个内部，而不是之后。如何在现有元素之后附加新元素？谢谢。

<ul>
  <li id="one"><!-- where the new li is being put --></li>
  <!-- where I want the new li -->
</ul>

回答by Yoshi

You can use:

您可以使用：

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

---

---

But as Pavel pointed out, the referenceElementcan be null/undefined, and if so, insertBeforebehaves just like appendChild. So the following is equivalent to the above:

但正如 Pavel 所指出的，referenceElement可以是 null/undefined，如果是这样，insertBefore 的行为就像appendChild。所以下面的等价于上面的：

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

回答by Meligy

If you are looking for a plain JS solution, then you just use insertBefore()against nextSibling.

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

Something like:

就像是：

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

Note that default value of nextSiblingis null, so, you don't need to do anything special for that.

请注意，默认值为nextSiblingis null，因此您无需为此做任何特殊处理。

Update:You don't even need the ifchecking presence of parentGuest.nextSiblinglike the currently accepted answer does, because if there's no next sibling, it will return null, and passing nullto the 2nd argument of insertBefore()means: append at the end.

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

Reference:

参考：

• nextSibling
• insertBefore

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

.

.

IF you are using jQuery (ignore otherwise, I have stated plain JS answer above), you can leverage the convenient after()method:

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

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

Reference:

参考：

• jQuery after()

• jQuery之后（）

回答by vitalikaz

You need to append the new element to existing element's parent before element's next sibling. Like:

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

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Or if you want just append it, then:

或者，如果您只想附加它，则：

var parentGuest = document.getElementById("one"); 
var childGuest = document.createElement("li"); 
childGuest.id = "two"; 
parentGuest.parentNode.appendChild(childGuest);

回答by HBP

This suffices :

这足够了：

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

since if the refnode(second parameter) is null, a regular appendChild is performed. see here : http://reference.sitepoint.com/javascript/Node/insertBefore

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

Actually I doubt that the || nullis required, try it and see.

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

回答by nathnolt

You could also do

你也可以这样做

function insertAfter(node1, node2) {
    node1.outerHTML += node2.outerHTML;
}

or

或者

function insertAfter2(node1, node2) {
    var wrap = document.createElement("div");
    wrap.appendChild(node2.cloneNode(true));
    var node2Html = wrap.innerHTML;
    node1.insertAdjacentHTML('afterend', node2Html);
}

回答by Sagar V

after is now a JavaScript method

after 现在是一个 JavaScript 方法

MDN Documentation

MDN 文档

Quoting MDN

引用 MDN

The ChildNode.after()method inserts a set of Node or DOMStringobjects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes.

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

The browser support is Chrome(54+), Firefox(49+) and Opera(39+). It doesn't support IE and Edge.

浏览器支持 Chrome(54+)、Firefox(49+) 和 Opera(39+)。它不支持 IE 和 Edge。

Snippet

片段

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 appendtoo

在片段中，我用另一个词追加太