对于循环和getElementById

Question

希望这很简单，但是我在将for循环中的数字系列打印回到HTML时遇到了麻烦。 参见下面的代码，当我按下按钮时，它只会返回10，而不是其余的数字-我在哪里出错？

<!DOCTYPE html>
<html>
  <body>
    <button onclick="myFunction()">Try It</button>
    <p id="number"></p>
    <script>
    function myFunction() {
        for (i=0; i<11; i++) {
            document.getElementById("number").innerHTML=i+"</br>";
        } 
    }
    </script>
  </body>
</html>

Answer 1

您将在每个循环中替换元素的内容。 如果要添加到内容中，请使用+=而不是= （作为最小更改）：

document.getElementById("number").innerHTML+=i+"</br>";
// here -----------------------------------^

就是说，我不会那样做，因为它使浏览器在幕后做了许多不必要的工作。 每次您读取innerHTML的值时，浏览器都必须遍历该元素并建立一个表示其内容的字符串。 每次编写innerHTML ，它都必须解析HTML，清除先前的元素并构建新的元素。

相反，请考虑构建一个字符串并进行一次分配：

function myFunction() {
    var i, s = "";
    for (i=0; i<11; i++) {
        s += i + "<br>";
    } 
    document.getElementById("number").innerHTML = s;
}

---

旁注1：由于您未声明i ， 因此您的代码成为“隐式全球性恐怖”的猎物。 我已经通过声明将其修复。

旁注2： </br>是无效标记。 在HTML中，它是<br> （或<br/> ；结尾的/ 完全是可选的）。 在XHTML中，它是<br/> 。

Answer 2

document.getElementById("number").innerHTML=i+"</br>";

将取代的HTML number ，将其更改为

document.getElementById("number").innerHTML+=i+"</br>";// see the `+`

Answer 3

将.innerHTML设置为=会完全更改其内容。 使用+ =附加内容。

document.getElementById("number").innerHTML += i + "</br>";

Answer 4

由于大多数其他答案都向您显示了错误，因此下面是对代码的编辑，其中显示了如何获得所需的结果，但又不会在循环的每次迭代中都遇到DOM：

function myFunction() {

    // create an array
    var arr = [];
    for (var i = 0; i < 11; i++) {

        // push the data to the array
        arr.push(i + '<br/>');
    }

    // grab the element and then add the joined array to the html
    document.getElementById("number").innerHTML = arr.join('');
}

演示