Skip to main content

输出

JavaScript 不提供任何内建打印或者显示函数。

显示方案​

  • window.alert() 将内容写入警告框
  • document.write() 将内容写入 HTML 输出
  • innerHTML 写入 HTML 元素
  • console.log 控制台打印

innerHTML​

JavaScript 使用 document.getElementById(id) 来访问 HTML 元素。

实例： 

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

在下面的示意中，我们可以看到 JS 设置的内容被 HTMl 中的 demo 元素渲染出来了。

document.write​

出于测试目的，使用 document.write() 比较方便： 

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

会与上面产生一样的效果。

注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ： 

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

点击上面的 试一试 可以重新渲染出内容，之前的被删除。

window.alert​

可以使用警告框来显示数据： 

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>
  <button onclick="window.alert(5 + 6);">点击显示</button>
</body>
</html>

console.log​

最常用的是使用 console.log 来打印信息。 

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

在浏览器中按住 F12 即可打开控制台查看信息。