使用for循环创建div元素

Question

这是一个非常简单的问题,但我不知道为什么它不起作用.我有一个包含4个项目的数组.我有一个容器,我想根据我的数组中的项目数插入一些div.我为此使用了for循环,但它只创建了一个div.它不应该创建4个相同的div元素吗？

这是代码:

count = new Array['1', '2', '3', '4'];
container = document.getElementById('items');

for (i = 0; i < count.length; i++) {
  container.innerHTML += '<div id="items"></div>';
}

#items {
  width: 20px;
  height: 20px;
  background: gold;
}

<div id="items"></div>

这是链接 http://codepen.io/2bu/pen/jyxNbw

Answer 1

您创建阵列的方式不正确.

试试这个:

var count = ['1', '2', '3', '4'];

注意:在for循环内部,您将创建具有相同ID的元素.ID应该是唯一的.

此外,如上所述,您将要附加到"items"div而不是添加具有重复ID的新div.

我会做这样的事情:

var count = ['1','2','3','4'];
var container = document.getElementById('items');
for(var i = 0; i < count.length; i++){
    container.append('<div>' + count[i] + '</div>');
}

并改进迭代:

var counts = ['1','2','3','4'];
var container = document.getElementById('items');
counts.forEach(function(count) {
    container.append('<div>' + count + '</div>');
}

很少需要使用for(var i = 0; i < x; i++).使用forEach,map或者reduce相当好(代码更简洁,临时变量是不必要的等等).