Problema em produzir lista completa de números usando o InnerHTML

Question

A seguir, é apresentado o código para criar uma lista seqüencial de números de 1 a 10. Gostaria de pegar esta lista e saída na "paginação" da div usando o InnerHTML. No entanto, quando executo o script, a única coisa que é emitida é o número 10. Quando substituo a página usando document.write, ele produz a lista inteira. Alguém pode me dizer o que estou fazendo de errado? Obrigado.

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>";
    }
}

E no HTML:

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

Answer 1

Bem, você substitui innerHTML em cada passo.
Tentar:

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

Ou melhor:

// 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>";
}

Isso substitui o innerHTML Todas as vezes durante o loop, então você só vê a última iteração.

Tente fazer isso = uma +=.

Ou melhor ainda, construa -o em uma corda e defina o innerHTML Só uma vez com essa string final. Isso será mais rápido, pois só precisa analisar a string como HTML uma vez, em vez de 100 vezes.