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

【JavaScript】使用document.write输出覆盖HTML问题的更多相关文章

  1. 1.document.write(""); 输出语句

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

  2. 用JAVA编写浏览器内核之实现javascript的document对象与内置方法

    原创文章.转载请注明. 阅读本文之前,您须要对浏览器怎样载入javascript有一定了解. 当然,对java与javascript本身也须要了解. 本文首先介绍浏览器载入并执行javascript的 ...

  3. Javascript的document对象

    对象属性 document.title                 //设置文档标题等价于HTML的<title>标签 document.bgColor               / ...

  4. Jsoup代码解读之三-Document的输出

    Jsoup代码解读之三-Document的输出   Jsoup官方说明里,一个重要的功能就是output tidy HTML.这里我们看看Jsoup是如何输出HTML的. HTML相关知识 分析代码前 ...

  5. javascript DOM document属性

    DOM控制页面中的所有元素 每个载入浏览器的HTML文档都会成为Document对象,利用它可对HTML页面中的所有元素进行访问 常用属性: title:返回或设置当前文档的标题 常用方法 write ...

  6. javascript循环遍历数组输出key value

    javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...

  7. jsp中的javascript的$(document).ready( function() { $("#loginForm").validate(）

    转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...

  8. 七、JavaScript之console.log输出和document.write输出

    一.代码如下 二.运行效果如下 三.点击之后,效果如下 四.按一下F12,在控制台中可以看到

  9. 1.JavaScript：写入 HTML 输出

    ①JavaScript 是可插入HTML页面的编程代码 ②JavaScript插入HTML页面后,可有所有的现代浏览器执行 ※提示:您只能在 HTML 输出中使用 document.write.如果您 ...

随机推荐

  1. Hbase数据结构和shell操作

    Hbase的数据结构 基本要素:命名空间.表.行.列.单元格,region,时间戳. 1.命名空间:NameSpaces的作用 Table:表,所有的表都是命名空间的成员,即表必属于某个命名空间,如果 ...

  2. Oracle数据库之第四篇

    /* 授权命令 grant 权限 to 用户 授权可以授予多个权限 grant connect,resource to baidu 收回权限 revoke 权限 from 用户 revoke dba ...

  3. JAVA微信企业付款到零钱(十分钟搞定)，附完整DEMO下载

    最近帮朋友做了一个简单的微分销系统,实现从企业付款到零钱分润的功能,简单记录一下微信企业付款到零钱的开发过程, 主要就是按规则封装好请求参数调用微信接口,涉及一些签名校验: A.接口流程 1. 获取用 ...

  4. 微信小程序实现点击拍照长按录像功能

    微信小程序实现点击拍照长按录像功能 代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...

  5. 实战项目-用例评审-问题总结-Dotest-董浩

    实战项目-用例评审-问题总结 内部班项目用例评审,总结的问题:供大家参考!提升用例最好的方式,可以互相执行下(评审),就会明白自己的差距或者需要避免的点在哪里.(前提是会) 1)覆盖率 原型中提到的一 ...

  6. WPF DATAGrid 空白列 后台绑定列 处理

    原文:WPF DATAGrid 空白列 后台绑定列 处理 AutoGenerateColumns <DataGrid x:Name="dataGrid" Margin=&qu ...

  7. neo4j 初级使用笔记

    linux下载: curl -O https://neo4j.com/artifact.php?name=neo4j-community-3.5.6-unix.tar.gz 配置端口: baidu h ...

  8. AFO！

    \(update:2019-12-13\) 成绩已经出了,我的OI生涯也算是正式结束了.虽然成绩并不满意,但好在也是收获了一个省一(虽然我不一定用).总的来说,作为正式选手不到两年半的OI之路走得并不 ...

  9. Codechef November Challenge 2019 Division 1

    Preface 这场CC好难的说,后面的都不会做QAQ 还因为不会三进制位运算卷积被曲明姐姐欺负了,我真是太菜了QAQ PS:最后还是狗上了六星的说,期待两(三)场之内可以上七星 Physical E ...

  10. CF1253F Cheap Robot（神奇思路，图论，最短路，最小生成树/Kruskal 重构树/并查集）

    神仙题. 先考虑平方级别的暴力怎么做. 明显答案有单调性,先二分 \(c\). 先最短路预处理 \(dis_u\) 表示 \(u\) 到离它最近的充电站的距离(一开始把 \(1\) 到 \(k\) 全 ...