为什么我的函数while循环从控制台中的5,4,3,2,1转到网页中的1,2,3,4,5

Question

所以，我有这个js代码：

function lFunc(){
var loopCount = 5;
while(loopCount > 0) {
var target = document.getElementById("p3");
target.innerHTML = "loopcount: " + loopCount + "<br>" + target.innerHTML;
console.log("loopcount is now: " + loopCount);
loopCount = loopCount - 1;
}
}

在控制台中显示：

loopcount is now: 5
loopcount is now: 4
loopcount is now: 3
loopcount is now: 2
loopcount is now: 1

但在网页中显示：

loopcount: 1
loopcount: 2
loopcount: 3
loopcount: 4
loopcount: 5

目标var引用只是一个空的打开和关闭的p标记。我不明白为什么网页从1到5，在我看来应该从5到1

Answer 1

您的级联在这里被搞砸了：

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

例如，如果现有的HTML是5，并且在它前面加上4，那么得到的HTML将是4 5。改为使用+=，以便以后的迭代将标记添加到容器的结尾，而不是将其前置到开头：

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

或者，为了避免每次迭代都必须重新解析容器中所有现有的标记，请改用insertAdjacentHTML：

target.insertAdjacentHTML('beforeend', "loopcount: " + loopCount + "<br>");

或者插入<div>s而不是<br>s:

target.appendChild(document.createElement('div')).textContent = 'loopcount: ' + loopCount;

Answer 2

为了使所需的输出与控制台输出匹配，您需要反转DOM输出。代码看起来像：

function lFunc() {
var loopCount = 5;
while(loopCount > 0) {
var target = document.getElementById("p3");
target.innerHTML = target.innerHTML + "<br />loopcount: " + loopCount;
console.log("loopcount is now: " + loopCount);
loopCount = loopCount - 1;
}
}

输出：

loopcount: 5
loopcount: 4
loopcount: 3
loopcount: 2
loopcount: 1

您在执行期间最初拥有的内容如下：

target.innerHTML = "LoopCount: " + loopCount + "<br>" + "LoopCount: 5<br>";
//where your "LoopCount: 5<br>" is the value of target.innerHTML 

结果是：

LoopCount: 1<br>LoopCount: 2<br>LoopCount: 3<br>LoopCount: 3<br>LoopCount: 5<br>

输出：

loopcount: 1
loopcount: 2
loopcount: 3
loopcount: 4
loopcount: 5