为什么insertBefore插入首个子元素前逻辑对嵌套节点不生效及解决方法

问题原因 #

• 选择器范围错误：原代码使用#container > *作为查询条件，其中>是直接子元素选择符，仅匹配#container的一级子节点（即parent1、parent2、parent3）。嵌套在parent2内部的child3-parent3属于二级子节点，没有被查询到，自然不会执行插入逻辑。
• 拼写错误：代码中新建元素的id写为了i-new-eleemnt，和预期的i-new-element不符。

修复方案 #

调整查询范围匹配所有层级的div，修正拼写，同时可以优化判断逻辑避免空白节点干扰：

1. 将选择器改为#container div，匹配容器内所有层级的div元素
2. 修正id的拼写错误
3. 可选将hasChildNodes()替换为children.length > 0：hasChildNodes会将元素内的换行、缩进空格等空白文本节点也判定为子节点，替换后仅判定存在元素子节点的情况，更符合业务预期。

修复后代码 #

var allDivs = document.querySelectorAll("#container div");

allDivs.forEach(function(div) {
  if (div.children.length > 0) {
    let theFirstChild = div.firstChild;
    let newElement = document.createElement("div");
    newElement.id = "i-new-element";
    div.insertBefore(newElement, theFirstChild);
  }
});

运行后所有包含子元素的div都会在首个子节点前插入目标div，child3-parent3的结构和给出的预期效果完全一致。

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