Javascript追加子元素之后

我想添加一个li元素，在使用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解决scheme，那么您只需对nextSibling使用insertBefore() 。

就像是：

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

请注意， nextSibling默认值为null ，所以，您不需要为此做任何特殊的事情。

更新：你甚至不需要像现在接受的答案一样检查parentGuest.nextSibling是否存在，因为如果没有下一个兄弟，它将返回null ，并将null传递给insertBefore()的第二个参数：append at结束。

参考：

• nextSibling
• 的insertBefore

。

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

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

参考：

• （）之后的jQuery

Answer 4

这足够：

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

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

其实我怀疑|| null || 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

达斯汀·迪亚兹 （ Dustin Diaz）对此有一个有趣的post：

“据我所知，Jeremy Keith提出了这个想法，即使人们也认为这也是一个DOM核心方法，但就像getElementsByClass一样，它不是，所以不是直接从函数这本书，我会留给你自己去买，而不是从公共领域拉下来这个简单的方法：

 function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling); } 

Answer 7

之后是现在的JavaScript方法

MDN文档

引用MDN

ChildNode.after()方法在此ChildNode的父节点的子节点列表中插入一组Node节点或DOMString对象。 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>