Question

我是编程新手，现在可以参加自己的FizzBuzz挑战赛，如下所示：

“编写一个程序，打印从1到100的数字。但是对于三个数字的倍数打印“ Fizz”（而不是数字），对于五个数字的倍数打印“ Buzz”。对于三个或五个数字的倍数打印“ 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中的文本，而不是创建循环输出列表。

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

谢谢。

Answer 1

使用.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>

Answer 2

如果使用jQuery，请尝试id first sur 4 Philipp Lahm 11 Philipp Lahm 14 Philipp Lahm，它将添加您需要的内容而不会替换您的当前值。

参考：http://api.jquery.com/append/

Answer 3

为什么不创建一个单独的函数将文本追加到您的元素。我个人不喜欢jQuery，因为它并不是真正需要的，它会使您的页面膨胀很多（个人观点），所以我将给您一个典型的例子。

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

<script>
function appendTextToElement() {

}
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);
}
</script>

Answer 4

您的问题是.html()将覆盖fizzbuzz段落中的所有内容，而不是附加到其后。

您可以使用.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/>");
  }
}

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

或者，更好，因为DOM方法被认为是昂贵的操作，通常最好将它们的使用量减至最少。不需要在for循环中附加到DOM。因此，您可以改为构建HTML字符串并使用.html添加字符串：

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

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

Answer 5

您可以仅将textnode附加到元素。我将元素移出循环，因为您只需要抓取一次，然后多次附加到该元素上，您还可以创建一个文档片段，附加到该片段上，然后将该片段添加到元素中，这将是最好的选项。由于这是一个简单的追加操作，您无需创建JQuery对象就可以直接访问该元素，这样做会更快一些，并且可以将代码从JQuery移开。

var ele = document.getElementById('#fizzbuxx');
var frag = document.createDocumentFragment();

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

ele.appendChild(frag);

如何将JavaScript循环输出到页面上（而不是在控制台中）？

5 个答案: