Question

这里我想用jsoDemo的所有迭代更新demox元素，但我只得到数组中的最终元素。我如何安排循环以便我逐个更新？

function GETJSON() {
    for (var i = 0; i < jsoDemo.length; i++) {
        var xxx = jsoDemo[i].name;
        console.log(xxx);
    }
    return document.getElementById("demoX").innerHTML = xxx;
    //break;
}

Answer 1

每次循环都会更改innerHTML所以当它完成时你只会得到最后一个。您可以使用document.getElementById("demoX").innerHTML += xxx;，也可以根据需要使用setInterval。另外，如上面的答案所述，将其置于循环

中

Answer 2

嗯，首先，从循环内更新DOM是一个重要的性能“不行”，因为对DOM的连续更改会导致用户代理每次都重建DOM。

相反，在循环中构建一个字符串，然后在循环完成后将字符串的最终值设置为DOM元素。

此外，.innerHTML适用于将包含HTML的字符串传递给元素的内容并导致该字符串由HTML解析器解析的情况。如果您没有指定包含HTML的字符串，请使用.textContent来避免额外的工作。

现在，就您的问题而言，当您使用=将每个新值连接到最后一个值时，您正在使用+=。并且，您不需要return来自此函数的任何内容，您只需要它来更新元素：

function GETJSON() {
  var result = "";
  for (var i = 0; i < jsoDemo.length; i++) {
    result += jsoDemo[i].name;
  }
  document.getElementById("demoX").textContent = result;
}

如何在每次循环迭代时更新DOM元素？

2 个答案: