Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Node.insertBefore()

概述

Node.insertBefore() 方法,在当前节点的某个子节点之前再插入一个子节点。

语法

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

如果referenceElementnullnewElement将被插入到子节点的末尾如果newElement已经在DOM树中,newElement首先会从DOM树中移除。

  • insertedElement 是被插入的节点,即 newElement
  • parentElement  是新插入节点的父节点
  • newElement 是被插入的节点
  • referenceElement 在插入newElement之前的那个节点

示例 1

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
// Create a new, plain <span> element
var sp1 = document.createElement("span");

// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("childElement");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;

// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>

没有 insertAfter 方法。可以使用 insertBefore 方法和 nextSibling 来模拟它。

在前一个例子中,可使用下面代码将 sp1 插入到 sp2 后面:

parentDiv.insertBefore(sp1, sp2.nextSibling);

如果 sp2 没有下一个节点,则它肯定是最后一个节点,则 sp2.nextSibling 返回 null,且 sp1 被插入到子节点列表的最后面(即 sp2 后面)。

示例 2

在第一个子元素的前面插入一个元素,可使用 firstChild 属性。

// Get a reference to the element in which we want to insert a new node
var parentElement = document.getElementById('parentElement');
// Get a reference to the first child
var theFirstChild = parentElement.firstChild;

// Create a new element
var newElement = document.createElement("div");

// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild);

当元素没有首节点时,firstChild 返回 null。该元素仍然会被插入到父元素中,位于最后一个节点后面。又由于父元素没有第一个子节点,也没有最后一个子节点。 最终,新元素成为唯一的子元素。

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes)

规范

文档标签和贡献者

标签: 
 此页面的贡献者: stormtea123, helloguangxue, teoli, ziyunfei, AlexChao, Josephok
 最后编辑者: stormtea123,