JS document.write()换行

Lan.W

已于 2023-02-20 12:35:33 修改

阅读量1.8k

点赞数 1

分类专栏： JS 文章标签： javascript html 前端

于 2023-02-11 12:16:26 首次发布

本文链接：https://blog.csdn.net/LlanyW/article/details/128982282

版权

JS 专栏收录该内容

18 篇文章 5 订阅

订阅专栏

本文介绍了JavaScript的document.write方法，用于向文档写入HTML表达式或代码，并展示了如何利用它进行换行。同时，文中通过示例详细解释了两种数组去重的方法：双重循环和使用Set数据结构。

摘要由CSDN通过智能技术生成

一开始想到的是用："\n"，未能达到换行效果。

通过多个参数实现换行效果：

通过传递多个参数，即可实现换行效果：

document.write("<br>",ar)

效果：

示例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>
<body>
<script>
    let ar = [1, 2, 8, 3, 90, 3, 6,6,45]
    let newAr = []
    //方法：2个for循环
    for (let i = 0; i < ar.length; i++) {
        console.log(ar)
        for (let j = i + 1; j < ar.length; j++) {
            if (ar[j] == ar[i]) {//相同删除
                ar.splice(j, 1)
                console.log(ar)
            }
        }
    }
    document.write(ar)
    //方法2：Set
    ar = [1, 2, 8, 3, 90, 3, 6,6,45]
    ar=[...new Set(ar)]
    document.write("<br>",ar)

</script>
</body>
</html>

document.write()介绍

定义和用法

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

功能：将一个文本字符串写入由 document.open() 打开的一个文档流。

可列出多个参数(exp1,exp2,exp3,...) ，它们将按顺序被追加到文档中。

语法：document.write(exp1,exp2,exp3,....)

参数解析：

（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示)

(2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算

(3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用的标签属性就是换行符 <br/> )

例1：使用 document.write() 向输出流写文本

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>


</body>

</html>

例２：使用 document.write() 向输出流写 HTML

<html>

<body>



<script type="text/javascript">

document.write("<h1>Hello World!</h1>")

</script>



</body>

</html>

例3：使用多参数的 document.write()

<html>

<body>



<script type="text/javascript">

document.write("Hello World! ","Hello You! ","<p style='color:blue;'>Hello World!</p>")

</script>



</body>

</html>

注意的坑：

1.因为 document.write 写入文档流，在关闭(已加载)的文档上调用 document.write 会自动调用 document.open，这将清除该文档。

2.向一个已经加载，并且没有调用过document.open()的文档写入数据时，会自动完成调用document.open()的操作。一旦完成了数据写入，系统要求调用document.close()，以告诉浏览器页面已经加载完毕。写入的数据会被解析到文档结构模型里。在上面的例子里，元素h1会成为文档中的一个节点。

3.如果document.write()被直接嵌入到HTML主体代码中，那么它将不会调用document.open()。

4.连续连个document.write()也不会相互覆盖是因为document.write("A")结束后，默认是不会调用document.close()的，所以第二个document.write("B")不会覆盖前一个write的内容,而是进行追加。