翻译正在进行中。

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。

如果给定的子节点是对文档中现有节点的引用,insertBefore()会将其从当前位置移动到新位置(在将节点附加到其他节点之前,不需要从其父节点删除该节点)。

这意味着一个节点不能同时位于文档的两个点中。因此,如果节点已经有父节点,则首先删除该节点,然后将其插入到新位置。在将节点追加到新父节点之前,可以使用Node.clonenode()复制节点。注意,使用cloneNode创建的副本不会自动保持同步。

如果引用节点为空,则将指定的节点添加到指定父节点的子节点列表的末尾。

如果给定的子节点是DocumentFragment,那么DocumentFragment的全部内容将被移动到指定父节点的子节点列表中。

 

语法

var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  • insertedNode The node being inserted, that is newNode
  • parentNode The parent of the newly inserted node.
  • newNode The node to be inserted.
  • referenceNode The node before which newNode is inserted.

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

referenceNode is not an optional parameter -- you must explicitly pass a Node or null. Failing to provide it or passing invalid values may behave differently in different browser versions.

Return value

The returned value is the added child except when newNode is a DocumentFragment, in which case the empty DocumentFragment is returned.

例子

示例 1

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

<script>
// Create the new node to insert
var newNode = document.createElement("span");

// Get a reference to the parent node
var parentDiv = document.getElementById("childElement").parentNode;

// Begin test case [ 1 ] : Exist a childElement --> All working correctly
var sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// End test case [ 1 ]

// Begin test case [ 2 ] : childElement is of Type undefined
var sp2 = undefined; // Not exist a node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
// End test case [ 2 ]

// Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
var sp2 = "undefined"; // Not exist a node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
// End test case [ 3 ]
</script>

示例 2

<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()。不过,可以使用 insertBeforeNode.nextSibling() 来模拟它。

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

parentDiv.insertBefore(sp1, sp2.nextSibling);

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

示例 3

在第一个子元素的前面插入一个元素,可使用 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。该元素仍然会被插入到父元素中,位于最后一个节点后面。又由于父元素没有第一个子节点,也没有最后一个子节点。 最终,新元素成为唯一的子元素。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

规范

Specification Status Comment
DOM
Node.insertBefore
Living Standard Fixes errors in the insertion algorithm
DOM4
Node.insertBefore
Obsolete Describes the algorithm in more detail
Document Object Model (DOM) Level 3 Core Specification
Node.insertBefore
Obsolete No notable changes
Document Object Model (DOM) Level 2 Core Specification
Node.insertBefore
Obsolete No notable changes
Document Object Model (DOM) Level 1 Specification
Node.insertBefore
Obsolete Introduced

参见

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,