JavaScript操作DOM时appendChild添加h2元素失效问题求助

• 循环变量重名：内外层for循环都使用了i作为计数变量，内层循环会覆盖外层的i值，导致外层循环逻辑混乱
• 子节点获取错误：使用childNodes会获取到元素内的空白文本节点（比如HTML代码里的换行、缩进），这些节点没有id属性，且不属于你需要处理的元素子节点
• 插入目标错误：生成的h2元素被插入到了原父节点parent[i]里，而非你新创建的button元素内，所以按钮里看不到h2内容
• 节点选择范围错误：querySelectorAll("*")会选中container下所有后代元素（包括child1、child2等子节点），而非你需要的container直接子父节点

// 只获取container的直接子元素
const parentNodes = document.getElementById("container").children;
const demo = document.getElementById("demo");

for (let i = 0; i < parentNodes.length; i++) {
    const currentParent = parentNodes[i];
    // 判断是否存在元素子节点
    if (currentParent.children.length > 0) {
        // 创建对应按钮
        const btn = document.createElement("button");
        btn.id = currentParent.id;
        demo.appendChild(btn);
        // 遍历当前父节点的元素子节点生成h2
        const childNodes = currentParent.children;
        for (let j = 0; j < childNodes.length; j++) {
            const h2 = document.createElement("h2");
            h2.innerText = childNodes[j].id;
            // 将h2插入到新建的按钮内
            btn.appendChild(h2);
        }
    }
}

#demo元素内会生成符合预期的结构：

<button id="parent2">
  <h2>child1</h2>
  <h2>child2</h2>
  <h2>child3</h2>
</button>

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