Salida de problemas lista completa de los números usando innerHTML

Question

El siguiente es el código para crear una lista secuencial de los números del 1 al 10. Me gustaría tomar esta lista y de salida en el "paginación" div usando innerHTML. Sin embargo, cuando ejecuto el guión, lo único que se emite es el número 10. Cuando sobrescribir la página utilizando document.write lugar, se da salida a toda la lista. ¿Puede alguien decirme lo que estoy haciendo mal? Gracias.

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

y en el código HTML:

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

Answer 1

Bueno, anular innerHTML en cada paso.
Proveedores:

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

O mejor:

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

Esto reemplaza el innerHTML cada vez a través del bucle, por lo que sólo se ve la última iteración.

Trate de hacer que un = +=.

O mejor aún, construirlo en una cadena y establecer el innerHTML acaba de una vez con esa cadena final. Esto será más rápido, ya que sólo tiene que analizar la cadena como HTML vez en lugar de 100 veces.