使用document.getElementById方法時for循環的Javascript不起作用

Question

好的，我是Java語言的新手，我只是想使用for循環方法在屏幕上打印0-10，並且在使用document.write方法時效果很好，但是在使用document.getElementById方法時它只能打印10。

示例1（僅在屏幕上打印出10個）

<script>
var i = 0;
for(i = 0;i <= 10;i++)
document.getElementById("demo").innerHTML = "This is " + i + "<br/>";
</script>

示例2（工作正常）

<script>
var i = 0;
for(i = 0;i <= 10;i++)
document.write(" This is " + i + "<br/>");
</script>

Answer 1

嘗試以下操作可能會有所幫助

 var i = 0; for(i = 0;i <= 10;i++) document.getElementById("demo").innerHTML += "This is " + i + "<br/>"; 

 <div id="demo"></div> 

Answer 2

在第一個循環中，您將覆蓋同一元素10次。 .innerHTML指令擦除元素的內容並寫入您傳遞的值。 為了獲得所需的行為，請將.innerHTMl = ...更改為.innerHTML += ...

第二個循環將您傳遞的文本附加到文檔末尾。

Answer 3

您的第一個示例要做的是：找到一個具有id demo的元素，並為其分配一個innerHtml值。 因此，您只能看到final循環的結果。

在第二個示例中， write方法將自動調用document.open（）打開當前文檔，並向其寫入（附加）某些內容。 另請參閱MDN上有關document.write的文檔