JS document.write()换行

news2024/12/24 2:30:29

换行效果:

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

        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>

例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.coloradmin.cn/o/337353.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3 中 导航守卫 的使用

目录前言&#xff1a;一、什么是导航守卫&#xff1f;二、导航守卫有哪几种&#xff1f;1、全局守卫&#xff08;3个&#xff09;全局前置守卫全局解析守卫全局后置钩子2、路由独享守卫&#xff08;1个&#xff09;3、组件内守卫&#xff08;3个&#xff09;beforeRouteEnter(t…

大数据Kylin(二):Kylin安装使用

文章目录 Kylin安装使用 一、Kylin安装要求 二、Kylin安装 1、Kylin安装前环境准备

SpringCloud-Netflix学习笔记12——Hystrix-Dashboard实现服务监控

一、服务监控 hystrixDashboard 除了隔离依赖服务的调用以外&#xff0c;Hystrix还提供了准实时的调用监控&#xff08;Hystrix Dashboard&#xff09;&#xff0c;Hystrix会持续地记录所有通过Hystrix发起的请求的执行信息&#xff0c;并以统计报表和图形的形式展示给用户&…

MikTex+Texmaker环境LaTeX使用bib文件引用参考文献步骤

一、MikTexTexmaker环境 MikTexTexmaker环境是一个LaTeX编辑与编译&#xff0c;以及PDF预览环境。如果还没装好的话&#xff0c;推荐浏览【MiKTeXTexmaker安装】这篇博客去安装此环境。 二、准备bib文件 文件名命名为ref.bib&#xff0c;添加如下内容(作为demo) article{kaelb…

微信小程序nodejs+java+python美食制作教程系统

食谱大全所要实现的功能分析,对于现在网络方便,食谱大全要实现管理员、用户可以直接在平台上进行查看自己所需数据信息,这样既能节省管理的时间,不用再像传统的方式,如果用户想要进行交流信息,必须双方见面进行沟通交流所需的信息,由于很多用户时间的原因,没有办法进行见面沟通…

MySQL_InnoDB引擎

InnoDB引擎 逻辑存储结构 表空间&#xff08;ibd文件&#xff09;&#xff0c;一个mysql实例可以对应多个表空间&#xff0c;用于存储记录、索引等数据。 段&#xff0c;分为数据段&#xff08;Leaf node segment&#xff09;、索引段(Non-leaf node segment)、回滚段(Rollba…

【LeetCode】每日一题(1)

目录 题目&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 写在最后&#xff1a; 题目&#xff1a; 这是他给出的接口&#xff1a; class Solution { public:int fillCups(vector<int>& amount) {} }; 作为一个数学学渣&#xff0c;我想不出厉害的数学算法…

151、【动态规划】AcWing ——2. 01背包问题:二维数组+一维数组(C++版本)

题目描述 原题链接&#xff1a;2. 01背包问题 解题思路 &#xff08;1&#xff09;二维dp数组 动态规划五步曲&#xff1a; &#xff08;1&#xff09;dp[i][j]的含义&#xff1a; 容量为j时&#xff0c;从物品1-物品i中取物品&#xff0c;可达到的最大价值 &#xff08;2…

ChatGPT入门系列(一)——注册

ChatGPT入门教程最近一段时间&#xff0c;OpenAI发布的ChatGPT聊天机器人太火了&#xff0c;连着上了各个平台的热搜榜。这个聊天机器人最大的特点是模仿人类说话风格&#xff0c;同时回答各种问题。有人说ChatGPT是真正的人工智能&#xff0c;它不仅能和你聊天&#xff0c;还是…

我的企业需要一个网站吗?答案是肯定的 10 个理由

如果您的企业在没有网站的情况下走到了这一步&#xff0c;您可能会想&#xff1a;我的企业需要一个网站吗&#xff1f;如果我的企业没有一个就已经成功了&#xff0c;那又有什么意义呢&#xff1f;简短的回答是&#xff0c;现在是为您的企业投资网站的最佳或更重要的时机。网站…

C/C++排序算法(二) —— 选择排序和堆排序

文章目录前言1. 直接选择排序&#x1f351; 基本思想&#x1f351; 具体步骤&#x1f351; 具体步骤&#x1f351; 动图演示&#x1f351; 代码实现&#x1f351; 代码升级&#x1f351; 特性总结2. 堆排序&#x1f351; 向下调整算法&#x1f351; 任意树调整为堆的思想&#…

复现篇--zi2zi

intro: 用GAN学习东亚语言字体。zi2zi(意思是从字符到字符)是最近流行的pix2pix模型在汉字上的应用和扩展。 article:https://kaonashi-tyc.github.io/2017/04/06/zi2zi.html code:https://github.com/kaonashi-tyc/zi2zi pytorch版本:https://github.com/EuphoriaYan/zi2…

JAVA求职(盘点我这些年曾经面试过的一些公司)

盘点我从毕业至今这些年面试过的一些公司&#xff0c;有些记不清了。想起了再补充。大家有没有撞上同一辆车的&#xff0c;或者有没有在里面上班的&#xff0c;评论说说感受。 文思海辉技术有限公司 招商银行软件中心(融博) 广东亿迅科技有限公司 广州博鳌纵横网络科技有限公司…

【Java基础】——面向对象:多态

【Java基础】——面向对象&#xff1a;多态一、多态性1、多态性的理解2、何为多态性&#xff1a;3、多态性的使用&#xff1a;虚拟方法调用4、多态性的使用前提&#xff1a;5、多态性的应用举例&#xff1a;6、多态性使用的注意点&#xff1a;二、object类的使用1、java.lang.O…

关于我和计算机的故事

前言 一直很懒&#xff0c;计划的每周更新三篇博客&#xff0c;至今未做到&#xff0c;看着博客和公众好少得可怜的访问量&#xff0c;难免感叹一番。 总想坚持做一些自己喜欢的事情&#xff0c;比如写作、跑步、看书。当放飞自我一段时间后&#xff0c;心间总产生满满罪恶感…

JAVA使用poi解析execl解决数值被转为科学计数法(如:手机号、身份证号、电话、等)解决方法

1、原由 大家都知道数字在EXCEL表格中存储时有两种表现形式。1.数字作为数值存储。当数字作为数值存储时&#xff0c;单元格中的数字可以参与数学运算。2.数字作为文本存储。当数字作为文本存储时,单元格中的数值不能够参与数学运算。 数字作为文本存储时&#xff0c;如果没有更…

LMZ31710RVQR直流转换器DRV5033AJQDBZRQ1传感器原理图

LMZ3 SIMPLE SWITCHER电源模块将DC/DC转换器、电感器和无源器件都集成在一个极小、极薄的 QFN 封装中&#xff0c;得到易于使用的负载点解决方案。只需3个外部组件&#xff0c;就能实现高性能和高密度负载点设计——这使得布局极其简单。LMZ3系列具有分立式负载点设计的灵活性和…

【java】Spring Boot启动流程

Spring Boot启动流程目录一、简述二、注解SpirngBootApplication注解三、启动方法1、创建SpringApplication实例1.1、WebApplicationType1.2、getBootstrapRegistryInitializersFromSpringFactories1.3、setInitializers && setListeners1.4、deduceMainApplicationCla…

基于RK3588的嵌入式linux系统开发(一)——开发环境的搭建(SDK解压与本地初始化)

1、拷贝rk3588的linux-sdk压缩包到工作目录&#xff0c;如下所示&#xff1a; 图1 拷贝rk3588的sdk到工作目录2、进入sdk目录进行MD5码的计算&#xff0c;并对比md5sum.txt文件内的值&#xff0c;确保压缩包未被修改。 图2 MD5码计算与匹配3、安装p7zip-full工具&#xff0c;并…

shell正则表达式

文章目录七、正则表达式7.1 什么是正则表达式7.2 为什么使用正则表达式7.3 如何学习正则表达式7.4 如何使用正则表达式7.5 基本正则表达式7.6 扩展正则表达式7.7 正则表达式案例七、正则表达式 7.1 什么是正则表达式 正则表达式是通过一些特殊字符的排列&#xff0c;用以查找…