今天在w3School 开始学习js的时候遇见一个问题：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。，w3School源码如下：
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>查阅资料后，将理解写在下面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("调用了函数，文档被重写");
}
</script>
</body>
</html>在这个例子里面，程序执行到第二个document.write就不会向下执行， 点击button按钮之后，执行第三个document.write，此时页面会整个刷新，只打印出调用了函数，文档被重写，也就是说执行document.write会导致覆盖整个页面中的原有信息。具体的细节和原理可以查看https://blog.csdn.net/wxh24578/article/details/72820367 。
下面引用https://blog.csdn.net/qq_37425546/article/details/54868908的一段话，做个总结：
用javascript编写的代码只能通过html/xhtml文档才能执行，代码一行一行解析，文档在加载的过程中实际是一边加载一边用document.write写出内容到屏幕上，而加载完成后，document就关闭。如果再调用document.write往网页上写内容的话，就会重写document。