2017年新年第一次CODING，遇到問題并解決，放這里做筆記順便給同樣遇到問題的你做參考。

另外這篇文章很多都是COPY別人原文的，感謝原作者的文章。

Node.insertBefore() 方法，在當前節點的某個子節點之前再插入一個子節點。

parentElement.insertBefore使用詳解

語法
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
如果referenceElement為null則newElement將被插入到子節點的末尾。如果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。該元素仍然會被插入到父元素中，位于最后一個節點后面。又由于父元素沒有第一個子節點，也沒有最后一個子節點。 最終，新元素成為唯一的子元素。


瀏覽器兼容性
Desktop Mobile
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes)
規范
insertBefore

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的第一次CODING附parentElement.insertBefore使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。