document.write 的执行分两种情况：

第一种：dom加载已完成

1. 执行 document.open() （即会清空document）

2. 执行 document.write()

3. 执行 document.close()

看例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <p>

    This is a p tag

  </p>

  <script>

     function write() {

        document.write('nothing left')

     }

     setTimeout(write, 1000)

  </script>

</body>

</html>

一秒后整个document会清除，包括script标签，最后只留下body中的 'nothing left'

第二种：dom未加载完成

1. document.write() (由于js是阻塞的，页面已经在document已经在open状态，所以不会清空document)

2. document.close()

看例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <p>

    This is a p tag

  </p>

  <script>

    function write() {

        document.write('nothing left')

    }

    write()

  </script>

</body>

</html>

执行后的结果是除了那个p标签，页面的body最后又加了一个 'nothing left'

参考链接：http://devdocs.io/dom/document/write

document.write 简介的更多相关文章

  1. document.compatMode简介

    对于document.compatMode,很多朋友可能很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面 ...

  2. Latex 入门教程

    Latex 入门教程 学习途径:LaTex入门_哔哩哔哩_bilibili 运行环境:texlive2021.texstudio-4.1.2-win-qt6 1. 基本结构 整个 Latex 文件分为 ...

  3. web API简介(二)：客户端储存之document.cookie API

    概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...

  4. 图形数据库Neo4J简介

    最近我在用图形数据库来完成对一个初创项目的支持.在使用过程中觉得这种图形数据库实际上挺有意思的.因此在这里给大家做一个简单的介绍. NoSQL数据库相信大家都听说过.它们常常可以用来处理传统的关系型数 ...

  5. mongodb简介（转）

    1.简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数 ...

  6. 比特币_Bitcoin 简介

    2008-11   Satoshi Nakamoto  Bitcoin: A Peer-to-Peer Electronic Cash System http://p2pbucks.com/?p=99 ...

  7. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  8. react学习与简介

    简介: React是Facebook开发的一款JS库 React解决了什么问题? 1).首先是以往mvc模式的缺陷,当代码库庞大时,mvc非常的复杂,每添加新的功能,项目的复杂度就几何倍的增长,导致代 ...

  9. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

随机推荐

  1. 第194天：js---函数对象详解（arguments、length）

    一.函数即对象 function add1(a,b){ return a+b; } //Function对象的实例 -- 高级技巧 --- 写框架必须用的... //前面表示参数,后面表示函数语句 v ...

  2. 第102天：CSS3实现立方体旋转

    CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. js中关于array的常用方法

    最近总结了一些关于array中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. 第 ...

  4. 【bzoj5146】有趣的概率 微积分

    题目描述 "可爱的妹子就像有理数一样多,但是我们知道的,你在数轴上随便取一个点取到有理数的概率总是0,"芽衣在床上自顾自的说着这句充满哲理的话,"诶,柚子,我写完概率论的 ...

  5. Argus UVALive - 3135（优先队列 水题一道）

    有一系列的事件,它每Period秒钟就会产生编号为qNum的事件,你的任务是模拟出前k个事件,如果多个事件同时发生,先处理qNum小的事件 今天再看看数据结构.. #include <iostr ...

  6. Doves and bombs UVA - 10765（统计割顶所连接的连通块的数量）

    题意:给定一个n个点的连通的无向图,一个点的“鸽子值”定义为将它从图中删去后连通块的个数. 求对应的点 和 每个点的“鸽子值” 用一个数组在判断割顶的那个地方 累加标记一下所连接的连通块的数量即可 初 ...

  7. 【BZOJ1443】游戏（二分图匹配，博弈论）

    [BZOJ1443]游戏(二分图匹配,博弈论) 题面 BZOJ 题解 很明显的二分图博弈问题. 发现每次移动一定是从一个黑点到达一个白点,或者反过来. 所以可以对于棋盘进行染色然后连边. 考虑一下必胜 ...

  8. centos 6.5 web service模式 系统 安装php

    1 首先是坚持libxml2出问题,提示如下: checking for xml2-config path... /home/www/thirdlib/libxml2/bin/xml2-configc ...

  9. centos上部署git

    安装Git #安装依赖环境 [root@wys01 wys]# yum install curl-devel expat-devel gettext-devel openssl-devel zlib- ...

  10. Codeforces Round #336 (Div. 2)B 暴力 C dp D 区间dp

    B. Hamming Distance Sum time limit per test 2 seconds memory limit per test 256 megabytes input stan ...