如何通过JavaScript循环创建带唯一ID与名称的多个DOM div元素？

你的代码存在两个核心问题：

• 循环条件错误：num是用户选择的数量值（而非数组），不能用num.length判断循环终止，直接用i < num即可。
• ID和元素名称未动态生成：固定写死divId1会导致所有div的ID重复，需要结合循环变量拼接唯一标识。

修正后的代码如下：

const body = document.querySelector('body');
// 替换为用户实际选择的数量，比如用户输入3就创建3个div
let num = 3;

for (let i = 0; i < num; i++) {
  const div = document.createElement('div');
  // 利用循环变量i+1生成唯一ID和name属性
  div.id = `divId${i + 1}`;
  div.name = `div${i + 1}`;
  // 可选：添加文本内容方便区分不同div
  div.textContent = `div ${i + 1}`;
  // 这里可以添加你的样式代码
  div.style.margin = '8px 0';
  div.style.padding = '10px';
  div.style.border = '1px solid #eee';
  
  body.appendChild(div);
}

关键说明：

• 用let i声明循环变量，避免全局变量污染。
• 使用ES6模板字符串`divId${i + 1}`动态拼接ID和name，确保每个div的标识唯一，编号从1开始匹配你的需求。
• 循环条件改为i < num，符合数量值的判断逻辑。

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