While 循环和 innerHTML - 为什么它会反向显示数字？答案

【问题标题】：While loop and innerHTML - Why does it show the numbers in reverse?While 循环和 innerHTML - 为什么它会反向显示数字？
【发布时间】：2019-02-07 07:16:17
【问题描述】：

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 显示它们，但我不知道为什么会这样

【问题讨论】：

在脑海中或在纸上仔细阅读它。您正在添加到字符串的前面，因此您正在将第一个添加的数字向下推。
将target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;更改为target.innerHTML = target.innerHTML; + "LoopCount: " + loopCount + "<br>"
^^ 从一开始就学习如何使用浏览器和/或 IDE 中内置的调试器也非常值得。然后，您可以单步执行代码，逐个语句，并准确查看变量在任何给定时刻包含的内容，您正在执行的操作顺序是什么等。
简要地说，我认为这是我问题的解决方案，但它飞走了，我再也找不到它了。感谢您的澄清，@Carcigenicate
您在每次迭代中添加新数据，即迭代越晚，距离字符串末尾越远，相当于“越靠近字符串开头” .

标签： javascript loops while-loop innerhtml

【解决方案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 first 放在该行，您将颠倒顺序：

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

【讨论】：