document.write 向文档中写内容，包括文本、脚本、元素之类的，但是它在什么时候执行不会覆盖当前页面内容尼？

程序员俊峰技术 2022年11月23日

0 收藏 535 点赞 4,851 浏览 854 个字

当你打开一个页面，浏览器会

调用 document.open() 打开文档
document.write(…) 将下载到的网页内容写入文档
所有内容写完了，就调用 document.close()
触发 dom ready 事件（DOMContentReady)

所以你如果在第3步之前 document.write(1) 那么你就直接追加内容到当前位置，如果你在第3步之后 document.write()，那么由于 document 已经 close 了，所以必须重新 document.open() 来打开文档，这一打开，内容就被清空了。

不信你可以这样验证一下：

打开 http://baidu.com 等页面加载完
在控制台运行 document.write(1)，会看到页面清空，只有一个 1
再次运行 document.write(1)，会发现页面没有清空，1 变成了 11，因为追加了一个1
运行 document.close()，这是文档就关闭了。
再次运行 document.write(1)，你会发现文档又清空了，变成了 1。

或案例实践下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title></head>
<body>
<p>
    原先内容
</p>
<script>
    document.addEventListener("readystatechange", function (event) {
        if (document.readyState === "complete") {
            document.write("complete");
            document.close();
            document.write("complete");
        }
    }, false);
</script>
</body>
</html>