JavaScript 输出 - 蝴蝶教程

JavaScript可能的显示方式

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

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

使用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属性是在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>

尝试一下

在加载HTML文档后使用document.write()将删除所有现有的HTML：

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

尝试一下

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

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

尝试一下

使用console.log()

出于调试目的，您可以使用console.log()方法显示数据。

您将在后面的章节中了解有关调试的更多信息。

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

尝试一下