While 循环和 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;

While 循环和 innerHTML - 为什么它以相反的方式显示数字？

While loop and innerHTML - Why does it show the numbers in reverse?

javascript

loops

innerhtml

while-loop