【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.如果您 ...
随机推荐
- PHP+Ajax实现文章心情投票功能实例
一个PHP+Ajax实现文章心情投票功能实例,可以学习了解实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户coo ...
- netcore3.0配置跨域
netcore3.0框架已集成了Microsoft.AspNetCore.Mvc.Cors包,因此不需要单独引用. 在ConfigureServices中添加Cors策略服务 services.Add ...
- CSS学习笔记-过度模块-编写过渡效果
过渡模块-编写过渡效果: 1.编写过渡套路: 1.1不要管过渡,先编写基本界面 1.2修改我们认为需要修改的属性 1.3再给被修改属性的元素添加过渡即可 2.弹性效果 < ...
- 应用Tomcat进行多端口域名访问，并配置开启gzip压缩方法
1.除了默认的8080端口以外,我们尝试应用9090端口进行域名访问,打开server.xml 如图: 2.在代码里面进行添加如下9090下面的代码: 如图: 3.用9090端口进行访问 如图: 4. ...
- pymysql增删改查操作
表结构 CREATE TABLE `students` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(20) DEFA ...
- Linux 内核虚拟地址到物理地址转换讨论【转】
转自:https://blog.csdn.net/sunlei0625/article/details/59476987 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请 ...
- 函数计算自动化运维实战 2 -- 事件触发 eip 自动转移
函数计算 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.函数计算会为您准备好计算资源,以弹性.可靠的方式运行您的代码,并提供日志查询,性能 ...
- ora-12505报错解决方法（转）
用oracle数据库新建连接时遇到ora-12505,此问题解决后又出现ora-12519错误,郁闷的半天,经过一番折腾问题解决,下面小编把我的两种解决方案分享给大家,仅供参考. 解决方案一: 今天工 ...
- acwing 50. 序列化二叉树
地址 https://www.acwing.com/problem/content/46/ 请实现两个函数,分别用来序列化和反序列化二叉树. 您需要确保二叉树可以序列化为字符串,并且可以将此字符串反序 ...
- MVC、MTV、FBV、CBV、母版和继承：
cookie session cookie的定义: 保存在浏览器上的一组组键值对 (请求头) 为什么要有? http协议是无状态,每次的请求之间是相互独立的,没有办法保存状态. Django中操作co ...