Javascript在元素之后附加子元素

Posted 2023-05-09

【中文标题】Javascript在元素之后附加子元素

【英文标题】：Javascript Append Child AFTER Element

【发布时间】：2011-11-07 15:52:31

【问题描述】：

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

【问题讨论】：

显示一些 html.. 父级是 ul 还是 li？

我投票决定重新开放此 QA，因为我想添加新的更新答案，因为此 QA 仍会作为谷歌的热门搜索结果弹出。

【参考方案1】：

你可以使用：

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

else 
  parentGuest.parentNode.appendChild(childGuest);

---

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

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

【讨论】：

if-else 是不必要的：insertBefore 的第二个参数可以是 null 或 undefined

【参考方案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);

【参考方案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 after()

【讨论】：

请原谅我的无知，但这如何用 javascript 实现？你能展示它如何与我当前的代码一起工作吗，谢谢。

我想如果你不使用 jQuery，那么 Yoshi 的回答是对的。这里也提到了netlobo.com/javascript-insertafter.html - 我只是倾向于假设 jQuery 是超级默认的。我的错误：D

一年半后，我对这个答案投了赞成票。因此，我对其进行了更新，以包含尽可能短的纯 JS 解决方案版本，以及其上的 Mozilla 文档链接。很抱歉没有早点做（因为其他人已经用非常相似的实现做了，我认为我不需要）。

【参考方案4】：

这就够了：

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

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

其实我怀疑|| null是必须的，试试看吧。

【参考方案5】：

after 现在是一个 JavaScript 方法

MDN Documentation

引用 MDN

ChildNode.after() 方法将一组 Node 或 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>

在sn-p中，我也用了另一个词append

【参考方案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);