For 循环和 getElementById

Question

希望这是一个简单的方法，但我无法从 for 循环打印出一个数字序列，返回到 HTML。请参阅下面的代码，当我按下按钮时，它只有 returns 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

设置 .innerHTML 为 = 完全改变了它的内容。使用 += 附加内容。

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

Answer 2

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

将替换number的HTML，改为

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

Answer 3

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

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：您的代码正在成为 The Horror of Implicit Globals 的牺牲品，因为您没有声明 i。我已经通过声明修复了上面的问题。

旁注 2：</br> 是无效标签。在HTML中，它是<br>（或<br/>；结尾/是完全可选）。在 XHTML 中，它是 <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('');
}

DEMO

For 循环和 getElementById

For loop and getElementById

html

javascript

for-loop

getelementbyid