可以显示带有for循环和InnerHTML的数组吗？

Question

我只想在div或标题内显示我的Array。

我在下面发布的代码只显示“列表”的最后一部分。

当我尝试使用：document.write时，一切正常。

有没有什么特别的技巧来显示列表，就像document.write在下面使用我的代码一样？

var Users = ["Till", "Didi", "Klausi", "Heinz"];
for (var i = 0; i < Users.length; i++) {
    document.querySelector("div").innerHTML = Users[i] + " is always on my page " + "<br>";
}

Answer 1

首先通过迭代数组并连接字符串来构建整个HTML。然后将它设置为innerHTML的div。

var Users = ["Till", "Didi", "Klausi", "Heinz"];

var _html = "";
for (var i = 0; i < Users.length; i++) {
    _html += Users[i] + " is always on my page " + "<br>";
}

document.querySelector("div").innerHTML = _html;

<div></div>

Answer 2

每次循环运行时，它都会将当前可迭代项插入HTML中，替换之前的项。因此，在循环外添加一个变量，并使用var x += User[i]附加到它。

Answer 3

var separator = ' is always on my page<br>';
var html = Users.join(separator) + separator;
document.querySelector("div").innerHTML = html;
// writes
// "Till is always on my page<br>Didi is always on my page<br>Klausi is always on my page<br>Heinz is always on my page<br>"