简介
inserBefore，顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法是：
Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点
而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。
如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置。
如果给定的子节点是DocumentFragment，那么DocumentFragment的全部内容将被移动到指定父节点的子节点列表中。
如果引用节点为空，则将指定的节点添加到指定父节点的子节点列表的末尾。（理论上）
用法
let insertedNode = parentNode.insertBefore(newNode, referenceNode);
参数
newNode：将要插入的节点referenceNode：被参照的节点（即要插在该节点之前）insertedNode：插入后的节点parentNode：父节点
因为insertedNode是插入后的节点，所以它与newNode是同一个节点。例如：
<body>
<div>
<p class="p1" id="p1">这是P1</p>
<p class="p2" data-name="p2">这是p2</p>
</div>
<p id="p3">这是p3</p>
<script>
let div = document.getElementsByTagName('div')[0];
let p2 = document.getElementsByClassName('p2')[0];
let p1 = document.getElementById('p1');
let p3 = document.getElementById('p3');
let returnDom = div.insertBefore(p2,p1);
console.log(returnDom === p2);
</script>
</body>
上面代码中输出的结果为true。
注意的地方
- W3C文档中关于
referenceNode参数的描述是可选的。而在实际中却不是这样，MDN文档的描述如下：
referenceNode引用节点不是可选参数——你必须显式传入一个 Node 或者 null。如果不提供节点或者传入无效值，在不同的浏览器中会有不同的表现。
在Chrome浏览器下，如果不指定referenceNode的话，将会报错。
当传入null时，新插入的元素将会插入到父元素的子元素列表末尾。
refernenceNode必须是父元素的子元素，如果不是的话，也会报错：
3128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
