使用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. 转发:iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

    -- iOS事件全面解析 转载来自崔江涛(KenshinCui) 链接:http://www.cnblogs.com/kenshincui/p/3950646.html 概览 iPhone的成功很大一 ...

  2. Mybatis 示例之 Association - 偶尔记一下 - 博客频道 - CSDN.NET

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  3. GIT使用规范流程

    1:每次开发新功能时,都应该新建立一个独立的分支(branch),整个项目工程有且只有一个主分支(master branch),项目发版时是从主分支上发布. Step01:切换到主分支 $ git c ...

  4. svn + jenkins + maven 实现java环境的自动化构建和部署

    1. 环境说明: 系统CentOS 7 x64 IP:  10.6.0.126 1.1 首先安装配置 svn Centos 7  通过yum 安装svn 既可, 版本为1.7.14 # yum -y ...

  5. 现在开始使用 ES6

    ECMAScript已经在2015年6月正式发布了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受.不过要想在浏览器端或者 Node 端直接运行 ES6 ...

  6. 关于Java通过JNI调用C 动态链接库(DLL)

    JNI介绍 用JNI实现Java和C语言的数据传递 JNI原理分析和详细步骤截图说明 jni的JNIEnv指针和jobject指针 JNI实现回调| JNI调用JAVA函数|参数和返回值的格式 Jni ...

  7. ios-Ineligible Devices 不被识别的设备

    此问题大致分为几种: 1.设备不可用,出现Ineligible Devices,如下图: 此错误因为 Xcode的Deployment Target 大于设备的,选择和设备一样 或者 低于设备的.如下 ...

  8. realvnc的卸载

    我安装了realvnc5.3.2后,采用如下方式卸载: (1)用如下命令查询当前安装的realvnc包的全名: rpm -qa realvnc-vnc-server (2) rpm -e 查询到的安装 ...

  9. Ehcache jgroups方式同步缓存出现问题总结

    ehcache配置文件按官网配置如下: <?xml version="1.0" encoding="UTF-8"?> <ehcache> ...

  10. iOS + UIWebView 实践

    1. 调用java script 现在只能实现弹出窗口 [self.m_webView stringByEvaluatingJavaScriptFromString:@"alert(1)&q ...