【JavaScript】使用document.write输出覆盖HTML问题

时间：2019-07-17 09:56:23 阅读：76 评论：0 收藏：0 [点我收藏+]

您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

分析

HTML输出流是指当前数据形式是HTML格式的数据，这部分数据正在被导出、传输或显示，所以称为“流”。

通俗的来说就是HTML文档的加载过程，如果遇到document.write就会把内容加入到文档中。例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>
      JavaScript 能够直接写入 HTML 输出流中：
    </p>
    <script>
      document.write("或无言最帅！");
      document.write("臭不要脸！");
    </script>
    <p>
      只能在 HTML 输出流中使用 <strong>document.write</strong>。
      如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
  </body>
</html>

页面显示的内容为：

JavaScript 能够直接写入 HTML 输出流中：

或无言最帅！（臭不要脸！）

只能在 HTML 输出流中使用document.write。如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。

文档加载后使用该方法，会覆盖整个文档。

那么文档加载完成后怎么使用document.write呢？我们可以为按钮绑定事件（这里我绑定onclick事件），如果加载完成后没有点击按钮，那么就不会调用函数，如果点击了按钮，调用document.write的话就会覆盖页面中的原有信息，进行重写。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>
      JavaScript 能够直接写入 HTML 输出流中：
    </p>
    <script>
      document.write("或无言最帅！（臭不要脸！）");
    </script>
    <button onclick="rewrite()">点击这里</button>
    <p>
      只能在 HTML 输出流中使用document.write。
      如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
    <script>
      function rewrite(){
        document.write("或无言仍然最帅！（仍臭不要脸！）");
      }
    </script>
  </body>
</html>

点击之后页面显示的内容为：