无法在同父元素的两个节点间插入新元素的问题

错误原因分析 #

1. 第一次代码报错
   你搞反了insertBefore的参数顺序，而且<hr>还未加入DOM树。insertBefore的正确语法是父元素.insertBefore(要插入的新节点, 参考节点)，其中参考节点必须是父元素已存在的子节点。你写成了insertBefore(containers[1], hr)，既颠倒了新节点和参考节点的位置，又用了一个不在DOM里的<hr>当参考，浏览器自然报错。

2. 第二次代码位置错误
   先把<hr>追加到父元素末尾，再把第二个.field-container插到<hr>前面，相当于把第二个容器移到了<hr>的后面，最终<hr>只会出现在父元素末尾，和预期的两个容器之间的位置完全相反。

正确解法 #

直接将<hr>插入到第二个.field-container的前面即可，无需额外步骤：

(function() {
    let containers = document.querySelectorAll('.field-container');
    let hr = document.createElement('hr');
    // 将hr插入到第二个.field-container的前方
    containers[0].parentNode.insertBefore(hr, containers[1]);
})();

运行后DOM结构会变成：

<div>
    <div class="field-container">
        <input placeholder="Field 1" type="text">
        <span></span>
    </div>
    <hr>
    <div class="field-container">
        <input placeholder="Field 2" type="text">
        <span></span>
    </div>
</div>

内容的提问来源于stack exchange，提问作者nlblack323