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

Posted 2023-05-07

【中文标题】在 Javascript 中使用 innerHTML 将 for 循环的结果写入网页

【英文标题】：Writing the result of a for-loop to the webpage using innerHTML in Javascript

【发布时间】：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);

【参考方案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 设置在最后。