javascript - 如何将JavaScript循环输出到页面上(而不是在控制台中)？

我是编程新手，现在可以尝试自己的FizzBuzz挑战，具体如下：

“写一个程序，打印从1到100的数字。但是，对于三个数字的倍数，请打印“ Fizz”，而不是数字；对于五个数字的倍数，请打印“ FuzzBuzz”。对于三个和五个数字的倍数，请打印“ FizzBuzz” ”。

我正在用Javascript和jQuery进行操作，可以在控制台中打印它，但如何修改它以使其实际打印到页面本身上？就像使用HTML来帮助输出列表/数组之类的东西一样，以便您可以在控制台上查看页面上的内容（如果我有道理）？

现在，我通过执行以下操作使其在控制台中工作：

for (var i=1; i < 101; i++){
    if (i % 15 == 0) console.log("FizzBuzz");
    else if (i % 3 == 0) console.log("Fizz");
    else if (i % 5 == 0) console.log("Buzz");
    else console.log(i);
}

然后我将其更改为：

<p id="fizzbuzz"></p>

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').html("FizzBuzz");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').html("Fizz");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').html("Buzz");
    }
    else console.log(i);
}

但这显然只打印出一行，因为它替换了'fizzbuzz' ID中的文本，而不是创建循环输出列表。

有人可以帮我吗？抱歉，我是菜鸟，我正在尝试学习。

谢谢。

最佳答案

使用.append()代替.html()以便将指定的内容作为所选元素的最后一个子元素插入

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').append("FizzBuzz<br/>");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').append("Fizz<br/>");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').append("Buzz<br/>");
    }
    else console.log(i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fizzbuzz"></p>