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

  If the given child is a reference to an existing node in the document, insertBefore() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then inserted at the new position. The Node.cloneNode() can be used to make a copy of the node before appending it under the new parent. Note that the copies made with cloneNode will not be automatically kept in sync.

If the reference node is null, the specified node is added to the end of the list of children of the specified parent node.

If the given child is a DocumentFragment, the entire contents of the DocumentFragment are moved into the child list of the specified parent node.

 

语法

var insertedNode = parentNode.insertBefore(newNodereferenceNode);

如果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.

Returns

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>
  • 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.

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

浏览器兼容性

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

See also

文档标签和贡献者

最后编辑者: zhuangyin,