原博客：

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

 </head>

 <body>

   <p id="test">good</p>

 </body>

 </html>

HTML

Situation 1：在window.onload中编写

 window.onload=function(){

   document.write('bad');

 }

运行结果：

原因：

window.onload事件是在文档内容完全加载完毕再去执行事件处理函数，文档加载完毕，文档流也关闭了，这个时候执行doucment.write()函数会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。

Situation 2：不在window.onload函数中写

 window.onload=function(){

   document.getElementsByTagName('p')[0].innerHTML='good';

 }

 document.write('bad');

运行结果：

原因：

当前文档流是由浏览器所创建，并且document.wirte()执行此函数的时候文档流并没有被关闭，这个时候不会调用document.open()函数创建新文档流，所以也就不会被覆盖了。浏览器创建的文档流无法通过document.close()关闭

document.write清除原有内容情况的更多相关文章

  1. JS清除选择内容的方法

    本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...

  2. js清除节点内容（改变标签元素）

    <!DOCTYPE HTML><html> <head>        <meta http-equiv="Content-Type" c ...

  3. jQuery 清除div内容

    $.ajax({            url: "SearchSN.aspx",            data: "SN=" + $("#txtS ...

  4. display为inline-block的元素有内容和没有内容情况下高度不一致的问题

    这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,虽然不会出现元素中没内容的情况,但是我还是决定必须解决这个问题,可能我有一些轻微的强迫症. &l ...

  5. 解决错误：“废弃 document 元素之后的内容”——HTML5新特性，局部样式表

    最近正在学习angularjs,不过本文和angularjs没多大关系.在学习使用route和ng-view使用模版之后,发现view装载之后,firefox都会报个错误“废弃 document 元素 ...

  6. IntelliJ idea鼠标移动到类上显示文档document（javadoc）内容

    IntelliJ idea鼠标移动到类上显示文档document(javadoc)内容 Step 1:设置鼠标移动到类上自动显示Javadoc文档 step2:为jdk下载javadoc Step3: ...

  7. shell脚本 在后台执行de 命令 >> 文件 2>&1 将标准输出与错误输出共同写入到文件中（追加到原有内容的后面）

    命令 >> 文件 2>&1或命令 &>> 文件 将标准输出与错误输出共同写入到文件中(追加到原有内容的后面) # ll >>aaa 2> ...

  8. iPhone多次输入错误密码锁机后刷机恢复（原有内容会丢失）

    这个操作会完全丢失手机当前存储的资料,已经备份到iTunes的内容,将来可以通过iTunes恢复.已经被自动备份到iCloud的内容,比如通讯录,将来可以自动从iCloud恢复.以前没有备份过的资料, ...

  9. shell清除文件内容脚本

    先来代码: [root@localhost Qingchu]# cat Qingchu.sh #!/bin/bash #描述: #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/b ...

随机推荐

  1. C++之类的比較运算符的重载

    比較运算符的重载通常有两种方式: 第一:作为成员函数重载 曾经几章的Student类为例: <span style="font-family:Microsoft YaHei;font- ...

  2. 010 ACL

    Router>en Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(co ...

  3. jQuery—— jQuery get方法+一般处理程序处理文本框内容

    网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...

  4. react组件是怎么来的

    组件的创造方法为React.createClass() ——创造一个类,react系统内部设计了一套类系统,利用它来创造react组件.但这并不是必须的,我们还可以用es6的class类来创造组件,这 ...

  5. Android 跑马灯效果与EditText冲突

    近期一个项目,因为布局TextView内容太长了.首先想到的就是跑马灯效果,所以就把TextView又一次自己定义了,尽管跑马灯效果实现了.只是导致了还有一个问题就是EditText输入问题,当第一次 ...

  6. 树状数组 LA 4329 亚洲赛北京赛区题

    复习下树状数组 还是蛮有意思的一道题: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&cat ...

  7. Spring中定时器实现

    在Spring 中使用Quartz,本文介绍Spring3.0以后自主开发的定时任务工具,spring task,可以将它比作一个轻量级的Quartz,而且使用起来很简单,除spring相关的包外不需 ...

  8. AndroidCommon示例

    效果图如下:              1) 自动滚动无限循环ViewPager.ViewPager嵌套自动滚动ViewPager (2) 网络缓存Demo (3) 图片缓存Demo,图片SD卡缓存D ...

  9. cubism.js

    Cubism.js 是时间序列化的一个D3插件,使用Cubism构建更好的实时指示板,从Graphite,Cube 和其他的资源中拉拉取数据.在GitHub的Apache License上可以获取Cu ...

  10. bzoj 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛【二分+贪心】

    二分答案,贪心判定 #include<iostream> #include<cstdio> #include<algorithm> using namespace ...