console.log 和 HTML 之间有什么联系？ [复制]答案

【问题标题】：What's the connection between console.log and HTML? [duplicate]console.log 和 HTML 之间有什么联系？ [复制]
【发布时间】：2014-05-30 01:43:38
【问题描述】：

这里是初学者，所以我可能没有使用正确的术语来描述这一点。我有一个 for 循环，else if 语句通过console.log 产生结果。

我想做的是将这些结果（基本的 fizzbuzz 问题）显示在 HTML 页面上。我一直在阅读高低，并且有点气馁，因为我无法自己解决这个问题。我的猜测是它应该与.append 相关，但我不知道这是否正确，或者事件（？）甚至应该是什么。（例如；.click、.hover 等）

如果您需要更多信息，请告诉我。我的头被我读过的所有代码弄得一团糟。任何帮助将不胜感激！

这是我的js代码：

var choice = prompt("What number should we count up to?");

for (var i = 1; i <= choice; 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);
    }

  }

还有html：

<!DOCTYPE html>
<html>
   <head>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all'>
    <script src="js/jquery-1.11.1.js"></script>        
    <script src="js/fizzBuzz.js"></script>

    <title>FizzBuzz!</title>  
  </head>    
  <body>

  <ol id="log">

  </ol>


</body>
</html>

标签现在是某种占位符...

【问题讨论】：

console.log() 和 HTML 之间没有联系。

标签： javascript jquery html

【解决方案1】：

Console.log 写入 javascript 控制台，即在浏览器上按 F12（见下图）

您的代码似乎可以正常工作，因为它成功写入控制台。

要在浏览器窗口中输出，一种方法是使用 JQuery，如本答案所示 Inserting HTML into a div

【讨论】：

感谢您的快速回答！你是对的，我有 js，但是在 html 页面本身上，我希望这些结果像在控制台中一样显示出来。那有意义吗？我在想它应该是 jquery 的东西？
更新了答案并带有 JQuery 方法的链接
太好了，谢谢。对此有几个问题： 1. 答案提到了“yourtHTML”——里面到底有什么？（我从 console.log 的输出？即；“嗡嗡声”？）（不确定 tHTML 是什么？错字？）。 2. jQuery应该放在javascript for Loop的上方/下方吗？
在 jquery api 网站上有很好的例子 - 例如api.jquery.com/append 。 “哈希”是一个 id 选择器，“点”是一个类选择器，所以在你的情况下选择你的列表元素的 id 它将是 $("#log")

【解决方案2】：

试试这个：
+= 运算符用于添加到字符串/文本的末尾。
.innerHTML 属性引用 HTML 标记内的文本。

var log = document.getElementById('log');
for (var i = 1; i <= choice; i++) {
    if (i % 15 === 0) {
        log.innerHTML += 'FizzBuzz';
    } else if (i % 3 === 0) {
        log.innerHTML += 'Fizz';
    } else if (i % 5 === 0) {
        log.innerHTML += 'Buzz';
    } else {
        log.innerHTML += i;
    }

  }

我建议你使用一些分隔符，比如：

log.innerHTML += ',Buzz';
// OR:
log.innerHTML += 'Buzz<br/>';

【讨论】：

+= on .innerHTML 效率不高，因为每次更改时浏览器都必须重新解析和重新创建 .innerHTML 中的所有 HTML 对象。它还会清除该流中现有 HTML 对象上的所有事件处理程序。
Dani-Br 在您的示例中，选择提示符在哪里？
@jfriend00 是对的。根据this benchmark comparison 使用insertAdjacentHTML，因为这就是它的设计目的。