使用innerHTML無法輸出完整的數字列表

Question

以下是創建從1到10的數字順序列表的代碼。我想要使用innerHTML在div「分頁」中輸出此列表並輸出。但是，當我執行腳本時，唯一輸出的是數字10.當我使用document.write覆蓋頁面時，它會輸出整個列表。有人能告訴我我做錯了什麼嗎？謝謝。

function generateNumbers() { 
    var numbers = new Array(); 

    // start generating numbers 
    for(var i = 1; i <= 10; i+= 1) { 
     numbers.push(i); 
    } 

    // print numbers out. 
    for(var i = 0; i < numbers.length; i++) { 
     document.getElementById("pagination").innerHTML = numbers[i] + "<br>"; 
    } 
} 

，並在HTML：

<div id="pagination"></div> 

Answer 1

嗯，你在每一步覆蓋innerHTML。
嘗試：

document.getElementById("pagination").innerHTML += numbers[i] + "<br>"; 

或者更好：

// no for loop 
document.getElementById("pagination").innerHTML = numbers.join("<br>"); 

Answer 2

for(var i = 0; i < numbers.length; i++) { 
    document.getElementById("pagination").innerHTML = numbers[i] + "<br>"; 
} 

這通過循環替換innerHTML每一次，所以你只能看到最後一個迭代。

試試使= a +=。

甚至更​​好，建立它在一個字符串中，並設置innerHTML只有一個最後的字符串。這將更快，因爲它只需將字符串解析爲HTML一次而不是100次。