为何这段JavaScript代码无法在parent-div中生成方块？

问题描述 #

需要动态生成10行10列的方块并添加到页面已有的.parent-div容器中，但运行以下代码后未得到预期效果：

const parentDiv = document.querySelector(".parent-div");

for (var i = 0; i < 10; i++) {

    var childDiv = document.createElement("div");
    childDiv.style.display = "flex";
    childDiv.style.flex = "1";

    for (var k = 0; k < 10; k++) {
        var newChild = document.createElement("div");
        newChild.style.flex = "1";
        newChild.style.height = "48px";
        newChild.style.width = "48px";
        newChild.style.border = "2px black solid";
        newChild.style.color = "#f389ca";

        newChild.addEventListener("mouseover", function(){
            newChild.style.color = "#8e2db8";
        });

        newChild.addEventListener("mouseout", function(){
            newChild.style.color = "#f389ca";
        });

        childDiv.appendChild(newChild);
    }

    parentDiv.appendChild(childDiv);
}

问题排查与修复方案 #

• 脚本加载时机错误：如果脚本在.parent-div元素之前加载，document.querySelector(".parent-div")会返回null，导致无法添加子元素。
  解决：将脚本放在<body>标签末尾，或者监听DOM加载完成事件：

  document.addEventListener('DOMContentLoaded', function() {
      // 原代码放在此处执行
  });
  

• 样式属性错误：代码中使用color属性设置方块颜色，但color控制的是文字颜色，方块背景色需要用background-color属性。

• 变量作用域导致事件绑定失效：使用var声明newChild时，由于var的函数作用域特性，事件处理函数中的newChild会指向循环最后创建的元素，导致鼠标事件仅对最后一个方块生效。解决：改用let声明newChild，或在事件处理函数中用this指向当前触发事件的元素。

修复后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
    const parentDiv = document.querySelector(".parent-div");
    // 给父容器设置flex布局，让每行垂直排列并占满宽度
    parentDiv.style.display = "flex";
    parentDiv.style.flexDirection = "column";
    parentDiv.style.gap = "4px"; // 可选：添加行间距优化显示

    for (let i = 0; i < 10; i++) {
        const childDiv = document.createElement("div");
        childDiv.style.display = "flex";
        childDiv.style.gap = "4px"; // 可选：添加列间距优化显示

        for (let k = 0; k < 10; k++) {
            const newChild = document.createElement("div");
            newChild.style.flex = "1";
            newChild.style.height = "48px";
            newChild.style.border = "2px black solid";
            newChild.style.backgroundColor = "#f389ca";

            newChild.addEventListener("mouseover", function(){
                this.style.backgroundColor = "#8e2db8";
            });

            newChild.addEventListener("mouseout", function(){
                this.style.backgroundColor = "#f389ca";
            });

            childDiv.appendChild(newChild);
        }

        parentDiv.appendChild(childDiv);
    }
});

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