【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.如果您 ...
随机推荐
- git操作教程
首先就是创建码云(用户名不能是中文),然后新建一个项目(用户名/项目名都不能是中文). 一.在Windows上安装Git 1.从http://msysgit.github.io下载,然后按默认选项安装 ...
- How to Check Device UUID or File System UUID. (Doc ID 1505398.1)
How to Check Device UUID or File System UUID. (Doc ID 1505398.1) APPLIES TO: Linux OS - Version Orac ...
- JAVA 高级特性枚举和泛型
枚举: 语法: public enum 枚举名 { 枚举值表(罗列所有值) } 例如: public enum EnumTest{MON,TUE,WED.THU,FRI,SAT,SUN} 枚举操 ...
- Druid-代码段-1-4
所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程1.3,连接可用性测试: //数据库连接可用性测试 protected boolean testConnectionInte ...
- 9.jenkins 集群
一. 集群配置 实际生产中,需要配置集群,来配合使用. jenkins 主节点需要安装插件 SSH Slaves 从节点(就是slave的机器)需要安装 jdk 开发包 yum install -y ...
- WPF 字体设置
原文:WPF 字体设置 WPF 主界面 更换字体 可全局 但是有的时候有的窗体 字体还是没变 可以做全局样式 <Window x:Class="CLeopardTestWpf.Main ...
- 用vbs和ADSI管理Windows账户
ADSI (Active Directory Services Interface)是Microsoft新推出的一项技术,它统一了许多底层服务的编程接口,程序员可以使用一致的对象技术来访问这些底层服务 ...
- csrf攻击与csrf防御
CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站 ...
- spring cloud 2.x版本 Sleuth+Zipkin分布式链路追踪
前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...
- 【文本处理命令】之awk命令详解
一.awk命令简介 awk 是一种很棒的语言,它适合文本处理和报表生成,其语法较为常见,借鉴了某些语言的一些精华,如 C 语言等.在 linux 系统日常处理工作中,发挥很重要的作用,掌握了 awk将 ...