你不知道的document.write
使用document.write向文档输出写内容;
document.write用法:document.write("要输出的内容");
其实document.write()有两种情况:
1.在文档流加载过程中执行代码:document.write会在代码所在位置添加输出内容.如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
document.write("<h1>放在header里的document.write</h1>")
</script>
</head>
<body>
<script type="text/javascript">
document.write("<h1>放在body里的document.write</h1>")
</script>
</body>
</html>
执行结果:
如果写入位置在header里,而且为引入文档,引入文件会被放在head里,但是如果先写非引入文档的内容,引入文档的标签也会写在body里,(这部分没有仔细研究,写项目的时候还没遇到坑... document.write应该会在文档中打开一个开口,然后写入要输入的东西,但是如果不存在html结构文档(只存在引入文档的标签像link,script引入,和meta这些),就会写到head中)
2.在文档流加载完成时执行代码:document.write会重新开启一个文档流覆盖之前网页上存在的文档,页面显示效果就是原先的网页上的内容都消失了,只剩下写入的内容.如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
document.write("<h1>放在header里的document.write</h1>")
</script>
</head>
<body>
<script type="text/javascript">
document.write("<h1>放在body里的document.write</h1>")
setTimeout(function () {
document.write("糟糕文档不见了!")
},2000)
</script>
</body>
</html>
在两秒之后执行结果:
因为在执行document.write()的时候文档已经加载完成,会重新打开一个文档流覆盖之前的文档流.所以原先的文档会消失.
你不知道的document.write的更多相关文章
- 另5个你不知道的HTML5接口API
原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...
- 你不知道的getComputedStyle
你不知道的getComputedStyle jQuery的css()的底层实现就用到了getComputedStyle这个方法,也许我们用到的很少,但是不得不说这时一个非常强大的函数,下面让我们一探究 ...
- setTimeout,setInterval你不知道的…
javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...
- setTimeout,setInterval你不知道的事
javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...
- 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- JavaScript中的this（你不知道的JavaScript）
JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心:随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所 ...
- 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域（一）
原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...
- 5个你不知道的HTML5的接口
原文地址:5 HTML5 APIs You Didn't Know Existed 原文日期: 2010年09月27日 翻译日期: 2013年8月7日 当人们看到或者说出"HTML5&quo ...
- 你不知道的JavaScript--Item23 定时器的合理使用
1.定时器概述 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间后运行:而后者则可 ...
随机推荐
- openstack controller ha测试环境搭建记录（九）——配置nova（计算节点）
编辑所有节点的/etc/hosts:10.0.0.14 controller110.0.0.12 controller210.0.0.13 controller310.0.0.10 myvip10.0 ...
- Laravel Eloquent get获取空的数据问题
在用laravel框架来获取数据,若数据不存在时,以为会返回空,其实不是的,其实是一个 collection 值,会返回如下: object(Illuminate\Database\Eloquent\ ...
- (简单) POJ 3264 Balanced Lineup，RMQ。
Description For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same ...
- 24、手把手教你Extjs5（二十四）模块Form的自定义的设计[3]
自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. ...
- JUCE_FIFO实现分析
JUCE_FIFO代码简单剖析,此处的剖析就是给自己留一个方便查询的内容:不做太多内容的要求,只做简单的记录:本文以初学者的角度来些,大牛请飘过O(∩_∩)O FIFO的功能在博客的其他帖子里面已经有 ...
- cocoaPods的安装使用 以及 Carthage
http://cnbin.github.io/blog/2015/05/25/cocoapods-an-zhuang-he-shi-yong/ 按照这个步骤就OK Note:当引入已有的project ...
- Linux 下如何安装 JDK ，以 Ubuntu 为例。
http://www.cnblogs.com/memory4young/p/ubuntu-install-jdk.html 一.下载 首先,当然是要下载了. 地址:http://www.oracle. ...
- EF dbcontext上下文的处理
,那么我们整个项目里面上下文的实例会有很多个,我们又遇到了多次,当我们在编程的时候遇到多的时候,一般我们就要想想能不能解决多这个问题. (2)这里我要说的是EF上下文怎么管理呢?很简单啦,就是要保证线 ...
- django学习——基础
在ubuntu下, 安装: pip install django / sudo apt-get install python-django 项目与应用 一个project包含多个app,每个app处理 ...
- 用scala实现一个基于TCP Socket的快速文件传输程序
这是用scala实现的一个简单的文件传输程序. 服务端 package jpush import java.io.{DataInputStream, File, FileOutputStream} i ...