Проблема вывода полного списка чисел с использованием innerhtml

Question

Ниже приведен код для создания последовательного списка чисел от 1 до 10. Я хотел бы взять этот список и выводить в Div «Pagination», используя innerhtml. Однако, когда я выполняю скрипт, единственное, что выводит, это номер 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 Каждый раз через петлю, так что вы видите только последнюю итерацию.

Попробуйте сделать это = а. +=.

Или даже лучше, постройте его в строке и установите innerHTML только один раз с этой последней строкой. Это будет быстрее, поскольку он должен разбирать строку как HTML один раз вместо 100 раз.