使用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的更多相关文章

  1. 另5个你不知道的HTML5接口API

    原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...

  2. 你不知道的getComputedStyle

    你不知道的getComputedStyle jQuery的css()的底层实现就用到了getComputedStyle这个方法,也许我们用到的很少,但是不得不说这时一个非常强大的函数,下面让我们一探究 ...

  3. setTimeout,setInterval你不知道的…

    javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...

  4. setTimeout,setInterval你不知道的事

    javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...

  5. 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  6. JavaScript中的this（你不知道的JavaScript）

    JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心:随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所 ...

  7. 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域（一）

    原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...

  8. 5个你不知道的HTML5的接口

    原文地址:5 HTML5 APIs You Didn't Know Existed 原文日期: 2010年09月27日 翻译日期: 2013年8月7日 当人们看到或者说出"HTML5&quo ...

  9. 你不知道的JavaScript--Item23 定时器的合理使用

    1.定时器概述 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间后运行:而后者则可 ...

随机推荐

  1. oracle创建游标和输出

    declare  cursor c_test_tbl2 is    select t2.id, t2.salary      from test_tbl2 t2, test_tbl1 t1     w ...

  2. JAVA基础--日期处理

    用SimpleDateFormat方法格式化日期格式: package DAO; import java.sql.Connection; import java.sql.DriverManager; ...

  3. （译）Windsor入门教程---第一部分 获取Windsor

    原文:http://docs.castleproject.org/Windsor.Windsor-tutorial-ASP-NET-MVC-3-application-To-be-Seen.ashx ...

  4. sencha touch视频教程

    链接地址:http://v.youku.com/v_show/id_XOTI1MDg1ODQ4.html

  5. 基于LNMP的Zabbbix之Zabbix Agent源码详细安装，但不给图

    基于LNMP的Zabbbix之Zabbix Server源码详细安装:http://www.cnblogs.com/losbyday/p/5828547.html wget http://jaist. ...

  6. HDU 5631 Rikka with Graph

    如果原图不连通,直接输出0. 如果原图连通,删除X条边之后要保证新图连通,再看数据是n+1条边-->因此,最多只能删去两条边. 因为n=100,可以枚举进行验证,枚举删去每一条边是否连通,枚举删 ...

  7. Android面试题随笔1

    1.如何让一个应用在手机上产生两个或多个图标? 在清单文件中的activity节点下配置如下:[5,7行代码] <activity android:name=".MainActivit ...

  8. MyBatis 3 中使用存储过程

    转:http://zachary-guo.iteye.com/blog/1756689 Mybats 是 iBatis 被 Google 收购后重新命名的一个工程,当然也做了大量的升级.iBatis ...

  9. AFNetworing进行POST上传 分类： ios技术 2015-04-01 17:03 73人阅读 评论(0) 收藏

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; //申明返回的结果是json类型 m ...

  10. 012-ViewState状态保持

    客户端的状态保持方案:ViewState.隐藏域.Cookies.控件状态.URL查询参数服务端的状态保持方案:Session(会话).Application.Caching(缓存).DataBase ...