当前位置: 首页 > news >正文

JS document.write()换行

换行效果:

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

        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:Setar = [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>

例2:使用 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的内容,而是进行追加。

http://www.lryc.cn/news/2208.html

相关文章:

  • Java高级-集合-Collection部分
  • Android性能优化:getResources()与Binder交火导致的界面卡顿优化
  • 常见的内存操作函数
  • python关键字
  • C语言 | 预处理知识详解 #预处理指令有哪些?他们如何使用?宏和函数有哪些区别?...#
  • 如何实现LFU缓存(最近最少频率使用)
  • 【C++之容器篇】精华:vector常见函数的接口的熟悉与使用
  • InstructGPT
  • RTOS之一环境搭建(基于TM4C123GXL)
  • 151、【动态规划】AcWing ——2. 01背包问题:二维数组+一维数组(C++版本)
  • DS期末复习卷(二)
  • 大数据技术架构(组件)31——Spark:Optimize--->JVM On Compute
  • ETL基础概念及要求详解
  • 刷题记录:牛客NC23054华华开始学信息学 线段树+分块
  • 二叉搜索树(查找,插入,删除)
  • C# PictureEdit 加载图片
  • 3种方法设置PDF“打开密码”,总有一种适合你
  • 第三章 数据链路层(点到点的传输服务)-计算机网络(笔记)
  • volatile关键字与CAS机制
  • LeetCode题解 动态规划(四):416 分割等和子集;1049 最后一块石头的重量 II
  • 【FFMPEG源码分析】从ffplay源码摸清ffmpeg框架(二)
  • PCIE 学习笔记(入门简介)
  • 锁的优化机制了解嘛?请进!
  • 5.点赞功能 Redis
  • Java序列化和反序列化(详解)
  • 【刷题篇】链表(上)
  • ConcurrentHashMap设计思路
  • Unity基于GraphView的行为树编辑器
  • 网络流量传输MTU解析
  • 30个HTML+CSS前端开发案例(四)