JavaScript document.write
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.write 方法。此方法直接写入 HTML 文档流，允许开发人员动态输出内容。
基本定义
document.write 方法将文本字符串写入由 document.open 打开的文档流。当文档正在加载时，此方法会将内容附加到文档中。
文档加载完成后，调用 document.write 将会先清空整个文档，然后再进行写入。这种行为使得它通常不适用于现代 Web 开发实践。
基本的 document.write
此示例演示了 document.write 最简单的用法。
<!DOCTYPE html>
<html>
<head>
<title>Basic document.write</title>
</head>
<body>
<script>
document.write('Hello, World!');
</script>
</body>
</html>
在此基本示例中，我们使用 document.write 将字符串“Hello, World!”直接输出到 HTML 文档中。文本会出现在脚本标签在文档中的位置。
这演示了 document.write 在初始页面加载期间将内容注入网页的基本用法。
写入 HTML 元素
此示例展示了如何使用 document.write 写入 HTML 元素。
<!DOCTYPE html>
<html>
<head>
<title>Writing HTML Elements</title>
</head>
<body>
<script>
document.write('<h1>Welcome to My Site</h1>');
document.write('<p>This content was generated dynamically.</p>');
</script>
</body>
</html>
这里我们使用 document.write 输出完整的 HTML 元素，包括一个 h1 标题和一个段落。浏览器会将它们渲染为普通的 HTML 元素。
这演示了 document.write 可用于生成结构化内容。请注意，HTML 字符串必须格式正确。
页面加载后写入
此示例演示了页面加载后调用 document.write 的效果。
<!DOCTYPE html>
<html>
<head>
<title>After Page Load</title>
</head>
<body>
<h1>Original Content</h1>
<button onclick="writeContent()">Write Content</button>
<script>
function writeContent() {
document.write('<h1>New Content</h1>');
}
</script>
</body>
</html>
在此示例中，单击按钮会在页面加载后触发 document.write。这将清空整个文档，并用新内容替换它。
这就是为什么 document.write 在现代 JavaScript 中通常被避免使用的原因。它可能会意外地擦除整个页面内容。
写入变量
此示例展示了如何使用 document.write 输出变量值。
<!DOCTYPE html>
<html>
<head>
<title>Writing Variables</title>
</head>
<body>
<script>
const userName = 'Alice';
const userAge = 30;
document.write(`<p>Name: ${userName}</p>`);
document.write(`<p>Age: ${userAge}</p>`);
</script>
</body>
</html>
这里我们使用模板字面量将变量值插入到字符串中，然后将这些字符串写入文档。变量 userName 和 userAge 显示在段落元素中。
这演示了 document.write 如何在初始页面加载期间将动态数据合并到页面内容中。
条件写入
此示例演示了使用 document.write 进行条件内容写入。
<!DOCTYPE html>
<html>
<head>
<title>Conditional Writing</title>
</head>
<body>
<script>
const isMorning = new Date().getHours() < 12;
if (isMorning) {
document.write('<h2>Good Morning!</h2>');
} else {
document.write('<h2>Good Afternoon!</h2>');
}
</script>
</body>
</html>
在此示例中，我们检查当前时间，并使用 document.write 根据是上午还是下午输出不同的问候语。
这表明 document.write 可以与条件逻辑一起使用，在页面加载期间创建动态内容。问候语会根据一天中的时间而变化。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.write。虽然它对简单情况很有用，但现代 Web 开发通常更倾向于使用 DOM 操作方法来获得更好的控制。
作者
列出 所有 JS DOM 教程。