【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.如果您 ...
随机推荐
- Python Web（二）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Django-debug-toolbar django-debug-toolbar 是一组可配置的面板,可显示 ...
- mysql注入新姿势(数字与字符编码注入) hex,conv
0x01 前言 今天看到师傅们发的一篇文章,感觉mysql注入还能这么用,于是自己搭建了一个简单的环境,进行复现. 0x02原理 首先介绍两个mysql函数 hex和conv conv(N,from_ ...
- m3u8视频格式分析
“ 学习m3u8格式.” 一段时间之前,乘着某美女CEO的东风,学习了一个新的数据格式,即m3u8格式. 经过一段时间的沉淀,美女CEO的热潮大概已经褪去,今天才对这个格式进行分析,嘻嘻. 先介绍下来 ...
- 记录Android开发中遇到的坑
1. 出现错误提示:Intel HAXM is required to run this AVD,VT-x is disabled in BIOS的解决办法. 点击SDK图标,安装Intel x86 ...
- Linux达人计划(一)
这时慕课网的Linux基础教学 http://www.imooc.com/view/175 好记性不如烂笔头.一般来说看视频只看不做是很难学好学扎实. 趁着每一节都有采纳的一些笔记.现在对它进行一些归 ...
- cf 【并查集】
http://codeforces.com/contest/1245/problem/D 题意就是:你需要让所有城市都有电,你看也在该城市建电站使他有电,同时你可以链接他与其他城市,使之有电 解决: ...
- day88_11_8，事务的隔离级别celery定时订单与项目整合。
一.事务的隔离级别. mysql的默认数据库级别是可重复读,一般的应用使用的是读已提交 http://www.zsythink.net/archives/1233/ 1. Read UnCommitt ...
- As Simple as One and Two
time limit per test3 secondsmemory limit per test256 megabytesinput: standard inputoutput: standard ...
- Centos 6 变更 窗口管理器
/etc/sysconfig/desktop ( 没有的话创建一个) DESKTOP="KDE" DISPLAYMANAGER="KDE"
- 用VB脚本复制文件夹并跳过重复文件
VB中可通过 scripting.filesystemobject 对象操作文件,其中复制文件或文件夹的函数参数可选覆盖或不覆盖.选择覆盖时,如果目标路径存在同名文件或文件夹,则替换掉已存在的文件.而 ...