JavaScript循环创建div异常：仅生成id为0的单个div问题求助

算力阿峰

2026-5-26

问题排查：createDiv函数仅生成单个div元素的原因与修复

我来帮你分析下这个问题——其实你的代码已经创建了3个div元素，只是你看不到而已！下面拆解问题原因和修复方案：

核心原因：元素重叠导致视觉上仅显示一个

你给每个div设置了：

dIv.style.width = "100%";
dIv.style.height = "100%";

如果父容器SAREE没有设置明确的高度和布局方式，这三个div会完全重叠在一起（默认都是块级元素，宽100%会占满父容器宽度，高度100%若父容器无固定高度则会塌陷，若父容器有高度则三个div会堆在同一位置），所以你视觉上只看到了id为0的那个，实际上另外两个也存在于DOM结构中。

你可以打开浏览器开发者工具（F12），查看SAREE节点的子元素，就能确认三个div都已被创建。

其他潜在问题

除了视觉重叠，代码还有两个需要修正的细节：

循环变量i未声明：你在for循环里直接写i = 0，没有用var/let/const声明，这会把i变成全局变量，可能和其他代码产生冲突。
参数x未使用：函数定义了参数x但完全没用到，循环固定执行3次，和你“根据传入参数x创建多个div”的原始意图不符。

修复后的代码示例

function createDiv(x) {
  // 用let声明循环变量，避免全局污染
  for (let i = 0; i < x; ++i) { 
    const dIv = document.createElement("DIV");
    const t = document.createTextNode(`div-${i}`);
    dIv.appendChild(t);
    dIv.id = `div-${i}`; // 给id加前缀，避免重复或冲突
    dIv.style.color = "blue";
    dIv.style.width = "100%";
    // 修改高度+添加间距，避免元素重叠
    dIv.style.height = "50px"; 
    dIv.style.margin = "5px 0";
    dIv.style.border = "1px solid #ccc"; // 加边框更易区分
    document.getElementById("SAREE").appendChild(dIv);
  }
}