Хотя цикл и innerHTML - Почему он показывает цифры в обратном порядке?

Question

function doItAgain() {

            var loopCount = 5;

            while(loopCount > 0) {

                    var target = document.getElementById("target");
                    target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;
                    console.log("LoopCount is now: " + loopCount);
                    loopCount = loopCount -1;
                }

Вот настоящая функция. Он активируется кнопкой, определенной с помощью обработчика события onclick.

Теперь у меня следующий вопрос: почему при нажатии кнопки отображаются цифры от 1 до 5, а не от 5 до 1, как в консоли? Я уже знаю, что если я укажу target.innerHTML в начале предложения, он отобразит их с 5 до 1 на моей веб-странице, но я не могу понять, почему это

Answer 1

Рассмотрим, что делает эта строка:

target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;

Допустим, что target.innerHTML после первого цикла содержит

LoopCount: 5<br>

Затем в цикле loopCount = 4 вы делаете

target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;

снова, что

target.innerHTML = "LoopCount: " + loopCount + "<br>" + "LoopCount: 5<br>";
// -----------------------------------------------------^^^^^^^^^^^^^^^^^^

и так вы получите

LoopCount: 4<br>LoopCount: 5

и т. Д.

Если вы поставите innerHTML сначала в этой строке, вы поменяете порядок:

target.innerHTML = target.innerHTML + "<br>LoopCount: " + loopCount;