最新的Web开发教程
 

JavaScript输出


JavaScript没有任何内置的打印或显示功能。


JavaScript的显示可能性

JavaScript可以“显示”的数据以不同的方式:

  • 写入一个警告框,使用window.alert()
  • 使用写入HTML输出document.write()
  • 写入到一个HTML元素,使用innerHTML
  • 写入浏览器控制台,使用console.log()

使用window.alert()

您可以使用一个提示框来显示数据:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
试一试»

使用document.write()

为测试目的,方便的是使用document.write()

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>
试一试»

使用document.write() HTML文档满载后,将删除所有现有的HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
试一试»

document.write()方法仅用于测试。


使用innerHTML

要访问HTML元素,JavaScript可以使用document.getElementById(id)方法。

id属性定义的HTML元素。 该innerHTML属性定义HTML内容:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

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

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

</body>
</html>
试一试»

为了“显示数据”在HTML中,(在大多数情况下),你会设置一个值innerHTML属性。


使用console.log()

在浏览器中,您可以使用console.log()方法来显示数据。

激活与F12浏览器控制台,并在菜单中选择“控制台”。

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>
试一试»