Difficulté à sortir la liste complète des numéros en utilisant innerHTML

Question

ce qui suit est le code pour créer une liste séquentielle des numéros de 1 à 10. Je voudrais profiter de cette liste et la production dans la div « pagination » en utilisant innerHTML. Cependant, quand j'exécute le script, la seule chose qui est émise est le numéro 10. Quand j'écrasent la page en utilisant document.write à la place, il affiche toute la liste. Quelqu'un peut-il me dire ce que je fais mal? Merci.

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

et dans le code HTML:

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

Answer 1

Eh bien, vous substituez innerHTML à chaque étape.
Essayez:

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

Ou mieux:

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

Cela remplace le innerHTML chaque fois à travers la boucle, de sorte que vous ne voyez la dernière itération.

Essayez de faire que = un +=.

Ou mieux encore, construire dans une chaîne et réglez le innerHTML juste une fois avec cette chaîne finale. Ce sera plus rapide car il ne dispose que d'analyser la chaîne en HTML, une fois au lieu de 100 fois.