【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.如果您 ...
随机推荐
- scrapy常用配置
一.基本配置 1.项目名称 2.爬虫应用路径 SPIDER_MODULES = ['Amazon.spiders'] NEWSPIDER_MODULE = 'Amazon.spiders' 3.客户端 ...
- java 超详细面经整理（持续更新）2019.12.18
目录 Java SE 请你谈谈Java中是如何支持正则表达式操作的? 请你简单描述一下正则表达式及其用途. 请你比较一下Java和JavaSciprt? 在Java中如何跳出当前的多重嵌套循环? 讲讲 ...
- C#中在多个地方调用同一个触发器从而触发同一个自定义委托的事件
场景 在Winfom中可以在页面上多个按钮或者右键的点击事件中触发同一个自定义的委托事件. 实现 在位置一按钮点击事件中触发 string parentPath = System.IO.Directo ...
- Loading class `com.mysql.jdbc.Driver'. This is deprecated. The driver is automatically registered via the SPI and manual loading of the driver class is generally unnecessary.
简单介绍 声明:使用JDK9.MYSQL8.idea 报错处理 报错信息如下 原因 提示信息表明数据库驱动com.mysql.jdbc.Driver已经被弃用了.应当使用新的驱动com.mysql.c ...
- C#控制内插字符串的格式
C#6.0推出了内插字符串 结果展示: 内插表达式字段宽度和对齐方式: 结果展示:(+/-代表右对齐.左对齐,数字表示显示宽度)
- HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置. 文件路径会在链接外部文件时被用到: 网页 图像 样式表 JavaScript 绝对文件路径 绝对文件路径是指向一个因特网文件的完整 URL: 实例 &l ...
- The PostgreSQL installation in windows
Summary: in this tutorial, we will show you how to install PostgreSQL on your local system for learn ...
- 25个JavaScript数组方法代码示例
摘要: 通过代码掌握数组方法. 原文:通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏) 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 要在给定数组上使用方法,只需要通 ...
- 向busybox中添加自己的applet
关键词:buysbox.applet等. busybox常用于嵌入式环境,集成中断Linux命令和工具.这些工具简单高效. 下面从如下方面了解: 这些命令是一个软链接到busybox,那么是如何从软连 ...
- 轻量级监控平台之cpu监控
轻量级监控平台之cpu监控脚本 #!/bin/bash #进程监控脚本 #功能需求: 上报机器的硬件层面-cpu负载数据 . /etc/profile . ~/.bash_profile pushur ...