使用insertBefore()在div第二个位置插入子节点报DOMException错如何解决

报错原因 #

insertBefore的调用规则是：必须由待插入位置所属的直接父节点调用，第二个参数（参照节点）必须是该父节点的直接子元素。
你当前的代码在document对象上调用该方法，但传入的参照节点是.test容器的子元素，不属于document的直接子节点，因此触发DOM异常。

修复后的JavaScript代码 #

var j = document.createElement('div');
j.innerHTML = '<p>CreateElement example</p>'
// 先获取目标父容器 .test
const testContainer = document.querySelector('.test');
// 由父容器调用insertBefore方法
testContainer.insertBefore(j, testContainer.children[1]);

补充说明 #

如果.test容器的子节点数量不足2个（即testContainer.children[1]为null/undefined），insertBefore会自动将新节点插入到父容器的末尾，不会触发报错。

内容的提问来源于stack exchange，提问作者Ram Prabodh Induri