javascript - Javascript getElementById 覆盖问题

Question

我有一个关于 Javascript 的简单问题。我正在尝试将一些值循环打印到 div 容器。问题是，而是在一个循环中多次打印该值，每次它被覆盖，结果我只得到一个值。请看下面的代码：

for (i=0; i<json.Locations.length; i++) {
    var location = json.Locations[i];
    var content = document.getElementById('eventsnearby');                                                    
    var html = location.name;
    content.innerHTML = html;
}

欢迎任何想法。谢谢。

Answer 1

追加，不要分配。

content.innerHTML += html;

更好的是，使用标准 DOM。

var content = document.getElementById('eventsnearby');                                                        
for (var i = 0; i < json.Locations.length; i++) {
    var text = json.Locations[i].name;
    var node = document.createTextNode(text);
    content.appendChild(node);
}

Answer 2

您只会得到一个值，因为您在每次循环迭代期间设置了 innerHTML 属性，而不是附加到它。尝试使用content.innerHTML += html;.

Answer 3

for (i=0; i<json.Locations.length; i++) {
var location = json.Locations[i];

var content = document.getElementById('eventsnearby');                                                    
var html = location.name;
content.innerHTML += html;
}