Question

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

这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

链接

Answer 1

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

请改为尝试：

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

注意：在for循环中，您正在创建具有相同ID的元素。 ID应该是唯一的。

另外，如上所述，您需要附加到＆＃39;项目＆＃39; 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要好得多（代码更简洁，临时变量是不必要的等等）。

Answer 2

1）您无法使用相同的elements创建更多DOM id。请改用类。

2）您必须按以下方式定义数组：var count = ['1', '2', '3', '4'];

以下是最终代码：

// var container = document.getElementById("container");
// for (var i = 0; i < array.length; i++) {
//    container.innerHTML += '<div class="box"></div>';
// } 
count = ['1','2','3','4'];
container = document.getElementById('itemsContainer');
  for(i = 0; i < count.length; i++){
    container.innerHTML+='<div class="items"></div>';
  }

var square= document.getElementsByClassName('items')[2];
square.style.backgroundColor='red';

.items{
  margin-top:10px;
  width:20px;
  height:20px;
  background:gold;
}

<div id="itemsContainer"></div>

如果您想访问一个items DOM element，则必须使用返回document.getElementsByClassName()的{{1}}方法。

NodeList

使用for循环创建div元素

2 个答案: