document write()的用法与注意事项

最新推荐文章于 2025-03-26 11:23:26 发布

zhangpaopao0609

最新推荐文章于 2025-03-26 11:23:26 发布

阅读量5.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41800366/article/details/101432518

版权

JS 专栏收录该内容

42 篇文章

订阅专栏

1 概述

document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
可列出多个参数(exp1,exp2,exp3,…) ，它们将按顺序被追加到文档中，默认情况是不会换行的。

我们通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，另一种是在调用该方法窗口之外的窗口。在第二种情况中，请务必使用 close() 方法来关闭文档。

2 使用方法

<html>
    <head>
    </head>
<body>
    <script type="text/javascript">
    document.write("测试文本");
    document.write("测试文本","默认不会换行");  // 多参数，默认不会换行
    document.write("<h1>测试文本</h1>")
    </script>
</body>
</html>

3 注意事项

document.write() 的使用有两点非常容易忽视和混淆的注意事项

默认不会换行
在HTML文档加载完成后，使用document.write()输出将会覆盖原有所有HTML；具体见代码

<html>
    <head>
    </head>
<body>
    <p>原本的HTML</p>
    <script type="text/javascript">
        document.write("会不会覆盖呢？")
    </script>
</body>
</html>

这样是不会覆盖的，是直接在HTML文档加载时一起完成的；

<html>
    <head>
    </head>
<body>
    <p>原本的HTML</p>
    <script type="text/javascript">
        setTimeout(() => {
            document.write("那这样会不会覆盖呢？")
        }, 1000);
    </script>
</body>
</html>