下面用 最清晰、最易懂的方式为你讲解：JavaScript 中的 document.write() 方法（深入浅出，第五篇）

🧩 一、document.write() 是什么？

document.write() 是 JavaScript 最早期用于 向页面写入内容 的方法之一。
它直接将字符串写入到 HTML 文档流（Document Stream） 中。

简单示例：

document.write("Hello World");

运行后，会把这句话直接写入网页正文。

🧨 二、它什么时候执行？

✔ 页面解析过程中执行

如果你在 HTML 加载过程中调用 document.write()，浏览器会将内容直接插入到当前位置。

例如：

<p>前面</p>
<script>
document.write("<strong>中间由 JS 写入</strong>");
</script>
<p>后面</p>

最终渲染：

前面
中间由 JS 写入
后面

❌ 三、为什么说它“危险”，容易出现问题？

⚠ 如果在页面加载完成后调用 document.write()，会直接清空当前页面，并重新生成内容！

示例：

setTimeout(() => {
  document.write("新的页面内容");
}, 2000);

2 秒后整个网页都没了，只剩：

新的页面内容

这会导致：

  • 页面完全重置
  • 所有 DOM 被覆盖
  • 所有事件监听器失效
  • 页面闪烁 / 崩溃风险

因此现代开发 几乎不会再用 document.write()。

📌 四、document.write() 的内部原理

它属于 文档流（document stream）API：

  • 浏览器一边下载 HTML，一边解析和渲染
  • 遇到 <script> 时暂停解析
  • 执行 JavaScript
  • JS 中的 document.write() 会把内容插回文档流
  • 然后继续解析

如果文档流已经关闭（DOMContentLoaded 之后），再写会强制重新打开文档流 → 清空页面。

🛠 五、正确替代方案（现代开发）

document.write() 早已被弃用，推荐以下替代方案：

1. 插入 HTML

document.body.innerHTML += "&lt;p>追加内容&lt;/p>";

2. 创建元素

const p = document.createElement("p");
p.textContent = "现代推荐方式";
document.body.appendChild(p);

3. 使用 DOM API 插入复杂结构

document.querySelector("#box").insertAdjacentHTML("beforeend", "&lt;span>插入&lt;/span>");

4. 用框架（Vue / React 等）渲染视图（最现代）

🧪 六、document.write() 什么时候仍然有用？

虽然过时，但它在 极少数场景 仍被保留：

✔ 在线广告（第三方脚本）

广告代码常写：

document.write('&lt;script src="ad.js">&lt;/script>');

因为广告必须“同步阻塞”插入，保证顺序。

✔ 教学示例（简单展示 JS）

比如初学者学习：

document.write("结果是：" + x);

✔ 非主流场景，如在 iframe 中生成简单页面

📝 七、总结（超精简记忆版）

特性说明
功能往文档流写内容
解析中使用正常插入 HTML
加载后使用清空整个页面
现代替代innerHTML / DOM API
状态已过时，不建议使用