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

您只能在 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>

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

或无言仍然最帅!(仍臭不要脸!)


总结

这次遇到了个坑,先前我的函数名用的是write,结果点击之后啥都没有了!然后对着别人的代码一行行对比,结果你猜哪里出了问题?write是js里的关键字。。。shit !

参考文献:

https://blog.csdn.net/qq_37425546/article/details/54868908

https://blog.csdn.net/weixin_36887648/article/details/53418520

转载于:https://www.cnblogs.com/huowuyan/p/11198526.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值