使用for循环批量创建HTML DOM的div元素失败，仅生成1个div

你遇到的这个情况有点让人困惑——从代码逻辑上看，循环每次都应该创建新的div并添加到工具栏里，但实际却只出现了一个。咱们一步步来排查可能的问题：

1. 最可能的直接诱因：拼写错误导致布局异常 #

你的代码里有个明显的笔误：

disaply: 'block'

正确的拼写应该是display: 'block'。虽然div默认就是块级元素，但这个错误可能会和其他样式叠加，导致后续生成的div出现重叠、被隐藏等情况，看起来就像只生成了一个。

2. 检查循环的执行基础：$hubbe.colors的长度 #

循环跑多少次完全取决于$hubbe.colors数组的长度，如果这个数组实际只有1个元素，那自然只会生成一个div。你可以在循环前加一行代码验证：

console.log($hubbe.colors.length); // 看看输出是不是你预期的数量

3. 优化代码：避免复用全局变量 #

你每次循环都把新创建的div赋值给$hubbe.pallet这个全局属性，虽然这不会直接导致只生成一个元素，但会覆盖之前的元素引用，给后续代码埋下隐患。建议改成局部变量写法：

for (let i = 0; i < $hubbe.colors.length; i++) { 
  const pallet = document.createElement('DIV'); 
  pallet.setAttribute('class', 'pallet'); 
  $hubbe.toolbarLeft.appendChild(pallet); 
  pallet.style.backgroundColor = $hubbe.colors[i]; 
  Object.assign(pallet.style, { 
    width: '40px', 
    height: '40px', 
    border: '2px solid #2c3e50', 
    margin: '20px 0 0 5px', 
    display: 'block', 
    cursor: 'pointer', 
  }); 
}

这里把var换成let（避免循环变量泄漏），用局部变量pallet代替全局的$hubbe.pallet，代码会更健壮。

4. 确认父元素的样式影响 #

如果$hubbe.toolbarLeft设置了overflow: hidden、display: flex且flex-wrap: nowrap这类样式，可能会导致后续生成的div被隐藏或者挤出视野。你可以打开浏览器F12开发者工具的Elements面板，直接查看DOM结构——确认是真的只生成了一个div，还是只是视觉上看不到而已。

先修正拼写错误，再检查数组长度和DOM结构，应该就能找到问题根源啦！

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