insertAfter JS - Javascript

插入一个元素在指定元素后面。

语法

insertAfter(newElement, targetElement)

参数

• newElement - 必需，要插入的元素。
• targetElement - 必需，目标元素，将在它之后插入新元素。

示例

假设我们有一个 div 元素列表，现在要在第一个元素后面插入一个新的 div。

HTML 代码：

<div id="list">
  <div class="item">第一项</div>
  <div class="item">第二项</div>
  <div class="item">第三项</div>
</div>

JS 代码：

function insertAfter(newElement, targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement, targetElement.nextSibling);
  }
}

var newItem = document.createElement("div");
newItem.className = "item";
newItem.innerHTML = "新的第一项";
insertAfter(newItem, document.getElementsByClassName("item")[0]);

这将在第一个项后面插入新元素。

说明

该函数创建一个新的元素节点，将其添加到目标元素的父节点中，并通过 Node.insertBefore() 方法将其插入到目标元素的后面。

如果目标元素是其父元素的最后一个子元素，则将新元素添加到父元素的尾部。否则，在目标元素的下一个兄弟节点之前插入新元素。

参考

• MDN web docs: Node.insertBefore()
• w3cschool: JavaScript insertAfter()函数

以上为 insertAfter() 函数的介绍和示例代码。该函数在 JavaScript 中十分常用，可以很方便地在目标元素之后插入新元素。希望可以对广大开发者有所帮助。