【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
【JavaScript】使用document.write输出覆盖HTML问题的更多相关文章
- 1.document.write(""); 输出语句
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- 用JAVA编写浏览器内核之实现javascript的document对象与内置方法
原创文章.转载请注明. 阅读本文之前,您须要对浏览器怎样载入javascript有一定了解. 当然,对java与javascript本身也须要了解. 本文首先介绍浏览器载入并执行javascript的 ...
- Javascript的document对象
对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor / ...
- Jsoup代码解读之三-Document的输出
Jsoup代码解读之三-Document的输出 Jsoup官方说明里,一个重要的功能就是output tidy HTML.这里我们看看Jsoup是如何输出HTML的. HTML相关知识 分析代码前 ...
- javascript DOM document属性
DOM控制页面中的所有元素 每个载入浏览器的HTML文档都会成为Document对象,利用它可对HTML页面中的所有元素进行访问 常用属性: title:返回或设置当前文档的标题 常用方法 write ...
- javascript循环遍历数组输出key value
javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...
- jsp中的javascript的$(document).ready( function() { $("#loginForm").validate(）
转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...
- 七、JavaScript之console.log输出和document.write输出
一.代码如下 二.运行效果如下 三.点击之后,效果如下 四.按一下F12,在控制台中可以看到
- 1.JavaScript：写入 HTML 输出
①JavaScript 是可插入HTML页面的编程代码 ②JavaScript插入HTML页面后,可有所有的现代浏览器执行 ※提示:您只能在 HTML 输出中使用 document.write.如果您 ...
随机推荐
- linux下安装oracle数据库--干货
1.修改系统名称,关闭防火墙,selinux.2.挂载镜像,并写入开机自动挂载.挂载点为/mnt/yummount -t iso9660 -o,loop /soft/Centos6.iso /mnt/ ...
- python连数据库制作音乐软件
import pymysql conn = pymysql.connect(host="localhost",user="root",password=&quo ...
- 解决brew update很慢
一般遇到这种问题,就跟墙有关啦,需要更换源. 用清华的源就非常好,去清华镜像的官网看一下说明,https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/ $ ...
- 用Docker运行Jenkins自动化构建.NET Core项目
目标 当代码提交到GitHub后,自动生成构建项目并部署到服务器.接下来介绍一下如何在容器中运行Jenkins,并自动化构建GitHub上的项目,使用自动化构建来解放你的双手. 前置条件 一台已经安装 ...
- android binder 进程间通信机制3-Binder 对象生死
以下概述Binder通信过程中涉及到的四个对象:Binder本地对象.Binder实体对象.Binder引用对象.Binder代理对象的生死. 1.Binder通信的交互过程 1.Client 进程发 ...
- Python：判断列表中含有字符串且组成新的列表打印输出-Dotest董浩
'''题一:判断列表中含有字符串且组成新的列表打印输出知识点:列表.列表的增删改查.for循环.if判断'''#@Author:Dotest软件测试#@QQ:1274057839names = ['D ...
- 《Web Development with Go》写一个简单的LoggingMiddleware
main.go package main import ( "fmt" "log" "net/http" "time" ...
- The 2017 ACM-ICPC Asia Shenyang Regional Contest
传送门 F - Heron and His Triangle 直接打表找到规律\(f_i=4f_{i-1}+f_{i-2}\),然后大数预处理一下,对于询问直接输出就行. Code #include ...
- 6.jenkins构建任务3-java项目
java项目 部署java的maven项目 1.检查插件,新版的jenkins默认就会安装 maven的插件 没有的话手动安装一下. Maven Integration plugin 2.安装环境 ...
- 【Java】String的首尾去空和判空
去除字符串首尾空白字符:包括\t,\r,\n及" ": //去除字符串首尾空白字符:包括\t,\r,\n及" ": System.out.println(&qu ...