本文介绍 JavaScript 在 HTML 中的基本输出与嵌入方法。通过 document.getElementById 获取元素并使用 innerHTML 修改内容，演示如何在页面加载时更新文本。同时讲解 document.write 直接写入文档的用法及其在页面加载后执行的覆盖风险，以及利用 console.log 配合浏览器调试工具进行值输出的标准做法。
JavaScript 输出与 DOM 元素操作
JavaScript 本身并未提供专门的打印或输出函数。在 HTML 页面中，JavaScript 的主要用途之一是操作 HTML 元素。要访问特定的 HTML 元素，可以使用 document.getElementById(id) 方法。通过指定元素的 "id" 属性来定位目标，并利用 innerHTML 属性来获取或修改该元素的内容。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
上述 JavaScript 代码通常放置在 <script> 标签内，以便在 Web 浏览器中执行。
- 代码 document.getElementById("demo") 用于通过 id 属性查找对应的 HTML 元素。
- 代码 innerHTML = "Paragraph changed." 用于将指定元素的 HTML 内容修改为 "Paragraph changed."。
使用 document.write 写入文档
为了测试方便，可以直接在 HTML 文档中编写 JavaScript 代码。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
使用 document.write() 函数仅用于向 HTML 文档直接输出内容。需要注意的是，如果在文档加载完成后执行 document.write，将会导致整个 HTML 页面被新内容覆盖。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>
通过 console.log 输出到控制台
若浏览器支持调试功能，可通过 console.log() 方法在控制台显示 JavaScript 的值。启用方式是在浏览器中按下 F12 键打开调试模式，并在弹出的调试窗口中选择 "Console"（控制台）选项卡。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>