document write.md

最新推荐文章于 2025-04-27 23:04:29 发布

earth_small_ma

最新推荐文章于 2025-04-27 23:04:29 发布

阅读量557

点赞数

本文链接：https://blog.youkuaiyun.com/earth_smallma/article/details/82903474

版权

零散专栏收录该内容

6 篇文章

订阅专栏

document.write

我们都很熟悉，document.write用于向document.open打开的文档流中写入内容。

但是document.write很可能会造成文档的重写

我们先来补充一些理论知识：

如果document.write向文档流中写入内容时，文档流没有打开。那么document.write会自动调用document.open打开文档流
如果在文档加载完毕后调用document.write，那么会导致重写（即文档中原来的内容会被全部清除掉）
如果在文档加载过程中调用document.write，那么写入的内容会被正常解析到文档中，而不会导致重写

下面展现一个重写的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="div"></div>
    <script>

        setTimeout(function(){
            document.write('hello world!');
        },3000)
    </script>
</body>

</html>

三秒后，文档已经加载完毕了，因此会造成重写，因此div等标签将会被清除，最后页面中只留下hello world!

在这里插入图片描述