JavaScript document.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DOM操作方法取代）-CSDN博客

本文链接：https://blog.csdn.net/Dontla/article/details/145639340

文章目录

document.write() 是 JavaScript 中一个直接将内容写入 HTML 文档的早期方法。以下是其详细介绍：

一、基本语法

document.write(content);

参数：content 可以是字符串、HTML 标签或变量，如 document.write("<h1>Hello</h1>")。

二、核心功能

1. 在文档加载阶段写入

当页面解析到 <script> 标签时，document.write() 会在当前位置插入内容：

<body>
  <script>
    document.write("<p>插入到 body 中的段落</p>");
  </script>
</body>

输出效果：内容直接显示在 <script> 标签所在位置。
在这里插入图片描述

2. 文档加载后调用会导致覆盖

若在页面加载完成后（如通过按钮点击触发），使用 document.write() 会清空整个页面：

 <!DOCTYPE html>
 <html>
 
 <head>
     <title>JavaScript练习</title>
 </head>
 
 <body>
     <h1>原始页面内容</h1>
     <button id="myButton">点击覆盖页面</button>
 
     <script>
         // 获取按钮元素
         const button = document.getElementById("myButton");
 
         // 绑定点击事件
         button.onclick = () => {
             document.write("页面已重置！"); // 点击后清空整个页面
         };
     </script>
 </body>
 
 </html>

在这里插入图片描述

三、注意事项

1. 覆盖风险

在异步代码或事件中调用时，内容会覆盖原有页面（触发 document.open()）。

2. 性能问题

频繁使用会阻塞页面渲染，影响性能。

3. XSS 漏洞

直接插入未过滤的用户输入可能导致安全风险：

// 避免直接插入用户输入！
document.write(userInput); // 可能被注入恶意脚本

4. 已关闭的文档流

如果文档已关闭（如异步脚本中），调用会报错：

// 延迟执行时文档已关闭，导致错误
setTimeout(() => document.write("错误！"), 1000);

四、使用场景（不推荐，但需了解）

快速测试：临时输出调试信息。
旧代码维护：兼容遗留系统。
动态脚本注入：某些广告脚本可能仍在使用。

五、现代替代方案

1. 操作 DOM 元素

// 插入内容到指定元素
document.getElementById("target").innerHTML = "<p>新内容</p>";

2. 创建新元素

const newElement = document.createElement("div");
newElement.textContent = "动态创建的内容";
document.body.appendChild(newElement);

3. 使用 `textContent` 防 XSS

// 安全插入纯文本
element.textContent = userInput;

总结

document.write() 因其覆盖风险和性能问题，已逐渐被现代 DOM 操作方法取代。建议优先使用 innerHTML、createElement 或框架（如 React/Vue）进行内容操作。