在 Javascript 中使用 innerHTML 将 for 循环的结果写入网页答案

【问题标题】：Writing the result of a for-loop to the webpage using innerHTML in Javascript在 Javascript 中使用 innerHTML 将 for 循环的结果写入网页
【发布时间】：2014-10-30 20:50:37
【问题描述】：

我正在学习 Javascript，现在对控制台感到厌烦，所以我想“写”到网页本身。

我正在将 for 循环的结果写入页面，我想打印结果，在每个索引后加一个逗号，我已经设法完成了，但是最后一个结果的末尾有一个逗号，如何我在第 9 个索引后停止逗号吗？我假设我需要使用某种索引（i[9]），但我不知道怎么说停止写逗号。

这是我的代码：

var x = document.getElementById("para1");
x.innerHTML = "Result: ";
for(var i = 1; i < 11; i++) {
    result= i + "," + " ";
x.innerHTML += result;
}

另外一件事，我在 x 变量的 innerHTML 中打印“结果”，除了在页面的实际 HTML 中之外，还有其他方法可以编写变量吗？例如在最后的 x.innerHTML 中？

我会非常感谢任何帮助！

谢谢

【问题讨论】：

对于第二个问题，还有其他输出变量的方法。您可以使用 JS 框架（例如，jQuery）。这些框架中的大多数将使用基本的 JS 方法和属性（如 innerHTML）进行 DOM 操作。
添加 html 的原生方式是：var resultElem = document.createElement("div"); resultElem.innerText = result; document.body.appendChild(resultElem); 您可以对任何 DOM 元素使用 appendChild，而不仅仅是 document.body。
这是 jquery，对吗？
我的评论使用了原生 JavaScript。
另外，如果你想避免 DOM 操作，你可以简单地使用 document.write(result);

标签： javascript for-loop innerhtml

【解决方案1】：

我会使用一个数组，然后在循环完成后，在, 上加入数组，然后附加到innerHTML：

var x = document.getElementById("para1");
var result = [];
for(var i = 1; i < 11; i++) {
    result.push(i);
}
x.innerHTML = "Result: " + result.join(", ");

【讨论】：

感谢您的快速回复！啊好的，这么一个数组，push方法填充的是空数组吗？
@Addioi 是的。 push() 在数组末尾添加一个元素。
push and join docs
为了帮助我理解这一点，result.push 将 1,2,3.. 放入数组中？
当您使用result.push(i) 时，您将i 的值添加到数组中。如果在将 console.log("Result Array: ", result); 推入数组后添加 console.log("Result Array: ", result);，则可以看到这一点。这样你就可以看到它正在构建。循环结束后，您将拥有一个完整的 [1,2,3,4,...11] 数组。要获得由逗号分隔的字符串，您需要用逗号将元素连接在一起。

【解决方案2】：

一般来说，要对最后一个做不同的事情，你必须做不同的事情：

 var x = document.getElementById("para1");
 x.innerHTML = "Result: ";
 for(var i = 1; i < 10; i++) {   // one less here
     result= i + "," + " ";      // this could be result = i + ", ";
     x.innerHTML += result ;
    }

 result = "10";            // this could be made shorter. I wanted it to parellel 
 x.innerHTML += result;    // the code above.

更新：为了更明显......

原路：

 var n = 10;
 for(var i = 1; i <= n; i++) {
     DoSomething(i);
    }

修改方式：

 var n = 10;
 for(var i = 1; i < n; i++) {
     DoSometing(i);
    }

 DoSomethingSpecialLastCase(n)

【讨论】：

这就是我喜欢 Javascript 的地方，总是有多种方法可以做同样的事情！谢谢
结果 = "10"，这只是将 10 放在数组的末尾吗？因此没有逗号？
@DavidSherret：不，我没有。 += 出现在下一行。
@JamesCurran 哦哈哈，我完全看错了那个代码。我读到您要附加到result，然后最终将innerHTML 设置在最后。