第一次CODING附parentElement.insertBefore使用详解

墨蓝 2022-07-11 13:26 177阅读 0赞

2017年新年第一次CODING，遇到问题并解决，放这里做笔记顺便给同样遇到问题的你做参考。

另外这篇文章很多都是COPY别人原文的，感谢原作者的文章。

Node.insertBefore() 方法，在当前节点的某个子节点之前再插入一个子节点。  
  
**parentElement.insertBefore使用详解**

语法  
var insertedElement = parentElement.insertBefore(newElement, referenceElement);  
如果referenceElement为null则newElement将被插入到子节点的末尾。如果newElement已经在DOM树中，newElement首先会从DOM树中移除。  
  
  
insertedElement 是被插入的节点，即 newElement  
parentElement 是新插入节点的父节点[**杰奥思琳**][Link 1]  
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  
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)  
Basic support1.0(Yes)(Yes)(Yes)(Yes)  
规范  
insertBefore

[Link 1]: http://jieaosilin.78tp.com/