你好，前端探险家！今天我们来聊聊那个曾经无处不在，如今却饱受争议的JavaScript老伙计：document.write。它像一把双刃剑——用得好事半功倍，用错了满盘皆输。一起来揭开它的正确用法吧！

一、初识document.write：基础使用场景

想象你正在编写一个静态HTML页面，突然想在<body>中间插一段动态文本。这时候，传统的做法是在<script>标签里直接调用：

<script>
  document.write("<p>这段内容是在页面加载时动态写入的</p>");
</script>

​关键点​：它只在页面解析阶段生效。脚本的位置决定了内容插入的位置——就像在HTML里直接写标签一样自然。

二、陷阱！那些年我踩过的坑

​错误示范1：在页面加载完成后调用​
某次我在DOMContentLoaded事件里测试了这段代码：

document.addEventListener("DOMContentLoaded", () => {
  document.write("Oops! 页面消失了！");
});

结果？整个页面被清空，只留下这行字——像极了不小心按了Ctrl+A再Delete的场景。

​错误示范2：异步脚本中的灾难​

setTimeout(() => {
  document.write("你以为我会乖乖出现？");
}, 1000);

延迟1秒执行？抱歉，浏览器早已完成解析。此时调用会直接覆盖整个文档，连<html>标签都不剩！

（亲身经历：早期写轮播图时因此痛失页面，默默加班到凌晨 😭）

三、为什么document.write如此"叛逆"？

核心在于文档流的工作机制：

  • ​加载阶段​：浏览器边解析HTML边执行<script>，此时document.write追加内容到当前位置。

  • ​加载完成后​：文档流关闭，浏览器认为你要"重写"整个页面，于是清空DOM从头开始。

四、正确使用姿势：锁定关键场景

  1. ​同步脚本嵌入​
    适合在静态页面中动态插入资源或内容，比如：

    <body>
  <h1>欢迎页</h1>
  <script>
    // 根据条件插入横幅
    if (new Date().getHours() < 12) {
      document.write('<div class="banner">上午特惠！</div>');
    }
  </script>
</body>

  2. ​第三方脚本的妥协方案​
    某些广告追踪脚本仍依赖它（比如Google Analytics旧版）。原理是：

    • 通过document.write写入<script>标签

    • ​必须将脚本放在页面底部，避免阻塞渲染

五、更优雅的替代方案：新时代的通行证

如今我们有更安全的DOM操作方式：

// 精准插入内容
const container = document.getElementById("content");
container.insertAdjacentHTML("beforeend", "<p>动态内容</p>");

// 修改文本（防XSS攻击）
document.querySelector(".title").textContent = "安全更新标题";

优势：

  • 不干扰现有DOM结构

  • 支持异步操作

  • 避免意外的页面覆盖

（项目中彻底弃用document.write后，页面崩溃率下降了80%——真实数据！）

六、总结：老工具的生存法则

  • ✅ ​能用​：页面解析阶段的同步脚本中

  • ⛔ ​禁用​：事件回调、异步代码、延迟加载逻辑

  • 🚀 ​进阶​：优先使用insertAdjacentHTML/textContent/createElement

document.write像是一把锈迹斑斑但依然锋利的匕首——掌握它的使用禁忌，就能在特殊场景下发挥作用。但记住：新时代的工程师，应该选择更趁手的武器！

遇到问题？欢迎留言讨论，我们一起避坑前行 💪

​版权声明​：原创文章，转载请注明作者与链接。文中代码示例可自由测试，但生产环境慎用document.write哦~