为何JavaScript循环未按预期在DOM中写入15次输出内容

现有代码的错误点 #

• 赋值逻辑错误：let smalldiv=document.createElement("div").textContent=i; 这行代码最终会把i的数值赋值给smalldiv，而非你预期的div DOM节点，导致后续调用appendChild方法时报错。
• 作用域错误：for循环内部用let声明的变量属于块级作用域，仅在循环内部生效，你写在循环外部的smalldiv.appendChild(pr);会直接抛出变量未定义的错误。
• 执行逻辑错误：节点追加操作写在循环外，就算逻辑正常也只会执行1次，无法完成15次节点绑定。
• 未挂载到页面DOM树：所有创建的节点都没有追加到页面已渲染的根节点（比如document.body）上，不会在页面中显示。

修复后的代码示例 #

// 若要挂载到指定容器可替换为对应节点获取逻辑，此处默认挂载到body
const container = document.body;
for(let i=1;i<=15;i++){
    // 先创建外层div节点，再单独赋值文本内容
    let smalldiv = document.createElement("div");
    smalldiv.textContent = i;
    // 创建子div节点并赋值文本
    let pr = document.createElement("div");
    pr.textContent = "product";
    // 完成父子节点绑定
    smalldiv.appendChild(pr);
    // 挂载到页面已存在的DOM节点上才会渲染可见
    container.appendChild(smalldiv);
};

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