JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

JavaScript 是一门脚本语言，用于编写网页交互逻辑。在编写网页时，有时需要向网页上输出一些文本、图像等内容，JavaScript 提供了多种方式实现对网页的输出。本文将详细介绍 JavaScript 输出显示内容的四种方式：document.write、alert、innerHTML 和 console.log。

1. document.write

document.write() 方法可以向网页写入 HTML 输出。在网页载入时，将调用默认文档的 write() 方法，运行 JavaScript 中的代码就可以向网页添加文本。需要注意的是，如果在文档加载完成后调用该方法，则会清空整个文档，并输出对应的文本。

示例 1：以下代码会向 HTML 文档中动态添加一个标题和一个段落

document.write("<h1>欢迎来到我的网站</h1>");
document.write("<p>这是我的第一段 JavaScript 代码。</p>");

上述代码会将 <h1>欢迎来到我的网站</h1> 和 <p>这是我的第一段 JavaScript 代码。</p> 插入到 HTML 文档中。

2. alert

alert() 方法弹出一个警告框，包含一段文本消息和一个“确定”按钮。

示例 2：以下代码会在网页载入后弹出一个消息框

alert("欢迎来到我的网站。");

执行上述代码后，浏览器会出现一个警告框，其中包含一个消息“欢迎来到我的网站。”。

3. innerHTML

innerHTML 属性用于获取和设置某个元素的 HTML 内容。通过 innerHTML 属性可以改变 HTML 元素的内容，包括文本和 HTML 标记。

示例 3：以下代码会在网页载入后替换页面中的 <p> 元素的文本内容：

<p id="paragraph">这是原始文本。</p>
<script>
document.getElementById("paragraph").innerHTML = "这是新的文本。";
</script>

执行上述代码后，<p> 元素的内容将变为 “这是新的文本。”

4. console.log

console.log() 用于在浏览器的控制台输出一条消息。通常用于调试 JavaScript 代码。

示例 4：以下代码使用 console.log() 输出一个消息。

console.log("这是一条消息。");

在控制台中将出现 “这是一条消息。”。

综上所述，使用 JavaScript 输出显示内容可以通过 document.write、alert、innerHTML 和 console.log 实现。根据使用场景的不同，选择不同的方式进行输出。