Node.insertBefore()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Node.insertBefore() method inserts a node before a reference node as a child of a specified parent node .

If the given node already exists in the document, insertBefore() moves it from its current position to the new position. (That is, it will automatically be removed from its existing parent before appending it to the specified new parent.)

This means that a node cannot be in two locations of the document simultaneously.

注意： 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 given child is a DocumentFragment , the entire contents of the DocumentFragment are moved into the child list of the specified parent node.

句法

let insertedNode = parentNode.insertBefore(newNode, referenceNode)

insertedNode: The node being inserted (the same as newNode )
parentNode
newNode
referenceNode: The node before which newNode is inserted. If this is null ，那么 newNode is inserted at the end of parentNode 's child nodes.

注意： referenceNode is not an optional parameter. You must explicitly pass a 节点 or null . Failing to provide it or passing invalid values may behave differently in different browser versions.

返回值

Returns the added child (unless newNode 是 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
let newNode = document.createElement("span")
// Get a reference to the parent node
let parentDiv = document.getElementById("childElement").parentNode
// Begin test case [ 1 ] : Existing childElement (all works correctly)
let sp2 = document.getElementById("childElement")
parentDiv.insertBefore(newNode, sp2)
// End test case [ 1 ]
// Begin test case [ 2 ] : childElement is of Type undefined
let sp2 = undefined // Non-existent 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 )
let sp2 = "undefined" // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2) // Generates "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
let sp1 = document.createElement("span")
// Get the reference element
let sp2 = document.getElementById("childElement")
// Get the parent element
let parentDiv = sp2.parentNode
// Insert the new element into before sp2
parentDiv.insertBefore(sp1, sp2)
</script>

注意： There is no insertAfter() method. It can be emulated by combining the insertBefore method with Node.nextSibling .

In the previous example, sp1 could be inserted after sp2 using:

parentDiv.insertBefore(sp1, sp2.nextSibling)

若 sp2 does not have a next sibling, then it must be the last child — sp2.nextSibling 返回 null ，和 sp1 is inserted at the end of the child node list (immediately after sp2 ).

范例 3

Insert an element before the first child element, using the firstChild 特性。

// Get the parent element
let parentElement = document.getElementById('parentElement')
// Get the parent's first child
let theFirstChild = parentElement.firstChild
// Create a new element
let newElement = document.createElement("div")
// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild)

When the element does not have a first child, then firstChild is null . The element is still appended to the parent, after the last child.

Since the parent element did not have a first child, it did not have a last child, either. Consequently, the newly inserted element is the only 元素。

规范

规范	状态	注释
DOM The definition of 'Node.insertBefore' in that specification.	实时标准	Fixes errors in the insertion algorithm
DOM4 The definition of 'Node.insertBefore' in that specification.	过时	Describes the algorithm in more detail
DOM (文档对象模型) 3 级核心规范 The definition of 'Node.insertBefore' in that specification.	过时	No notable changes
DOM (文档对象模型) 级别 2 核心规范 The definition of 'Node.insertBefore' in that specification.	过时	No notable changes
DOM (文档对象模型) 1 级规范 The definition of 'Node.insertBefore' in that specification.	过时	引入

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`insertBefore`	Chrome 1	Edge 12	Firefox 3	IE 9	Opera 7	Safari 1.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

另请参阅

元数据

最后修改： Apr 27, 2020

DOM (文档对象模型)
节点
特性
1. baseURI
2. baseURIObject
3. childNodes
4. firstChild
5. isConnected
6. lastChild
7. ~~localName~~
8. ~~namespaceURI~~
9. nextSibling
10. nodeName
11. ~~nodePrincipal~~
12. nodeType
13. nodeValue
14. outerText
15. ownerDocument
16. parentElement
17. parentNode
18. ~~prefix~~
19. previousSibling
20. ~~rootNode~~
21. textContent
方法
1. appendChild()
2. cloneNode()
3. compareDocumentPosition()
4. contains()
5. getRootNode()
6. ~~getUserData()~~
7. hasChildNodes()
8. insertBefore()
9. isDefaultNamespace()
10. isEqualNode()
11. isSameNode()
12. ~~isSupported()~~
13. lookupNamespaceURI()
14. lookupPrefix()
15. normalize()
16. removeChild()
17. replaceChild()
18. ~~setUserData()~~
继承：
1. EventTarget
DOM 相关页面

在此页

句法

返回值

范例

范例 1

范例 2

范例 3

规范

浏览器兼容性

图例

另请参阅

相关话题