document.write() //将内容写入文档,当前编辑位置为写入的内容的后一个字符
document.writeln() //将内容写入文档,并添加一个换行符,当前编辑位置为写入的内容的后一行

document.write()和document.writeln都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别,除非是输出到pre或xmp元素内

测试一下:


[Ctrl A 全选 注:引入外部Js需再刷新一下页面才能执行]

运行上面的代码,在新开的窗口中:查看-源文件,就可以看到,writeln是以行方式输出

实际效果的区别在于:源代码中的换行,会导致实际效果中的一个“空格”对比以下例子来体会:

[Ctrl A 全选 注:引入外部Js需再刷新一下页面才能执行]

输入结果其实是:111 222

所以在应用中,使用write会比writeln更为方便,不会产生不必要的空格效果,所以我的Html与Js在线互转小工具[https://www.jb51.net/tools/html-js.htm]特地将网上大多数使用writeln的方式改为write,相信会给大家带来方便。

关于保留格式,测试一下:

[Ctrl A 全选 注:引入外部Js需再刷新一下页面才能执行]


document.write()和document.writeln()的区别 用js写动态select

解决思路:

两者都是JavaScript向客户端输出的方法,对比可知写法上的差别是一个ln--line的简写,换言之,writeln 方法是以行输出的,相当于在?winte?输出后加上一个换行符。

注意:document.write方法可以用在两方面:在网页载入过程中用实时脚本创建网页内容以及用延时脚本创建本窗口或新窗口的内容.该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.该字符串参数可以是变量或值为字符串的表达式,写入内容常常包含HTML标记.

记住,载入网页后,浏览器输出流将自动关闭.在些之后任何一个对当前网页的document.write()方法都将打开一个新的输出流,它将清除当前网页输出内容(包括源文档中的任何变是和值).因此,如果希望用脚本生成的HTML内容替换当前网页,就必须把HTML内容连接起来赋给一个变量.这里,使用document.write()来完成写操作.不必清除文档并打开一个新的数据流,一个document.write()调用就OK了.

关于document.write()方法,还需要说明它的相关方法document.close().脚本向窗口(不管是本窗口还是其它窗口)写完内容后必须关闭输出流.在脚本的最后一个document.write() 方法后面.必须确保有document.close()方法.不这样做就不能显示图像和表单.而且,后面调用的任何document.write() 只会将内容追加到网页后,而不会清除现有内容,写入新值

具体步骤:

1.打开一个空白窗口。
window.open()

2.用 write 方法向空白窗口写入代码。

document.write("Line1")
document.write("Line1")

3.用 writeln 方法向空白窗口写入代码。

document.writeln("Line1")
document.writeln("Line2")

4.完整代码示例:



注意:两种方法仅当在查看源代码时才看得出区别。
特别提示:把上面的代码加入网页中,然后查看弹出窗口的源代码,将会看到:

Line1Line1Line1
Line2

页面效果和源代码如图。




特别说明

总的来说,一般情况下用两种方法输出的效果在页面上是没有区别的(除非是输出到pre或xmp元素内)。

二、document.write()向指定位置写html

页面初始化时可以正确写在select框内
但调用时就写在控件外了 ,不知道document.write()能否想改变innerHTML或outerHTML来动态写HTML?以及写的HTML要用来显示该如何处理?

如下:

 
 


关于保留格式,测试一下:<script> document.write("<pre>我在pre中不会换行!")document.write("我在pre中不会换行!")document.writeln("我在pre中会换行!")document.writeln("我在pre中会换行!")document.writeln("我在pre中会换行!</pre>") </script>

document.write与writeln的输出内容区别说明的更多相关文章

  1. document.write与writeln的输出内容区别说明

    document.write()和document.writeln都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别。

  2. ubuntu安装svn服务器

    如果用户较多,需要分角色划分权限参考下边代码这段代码,为test创建了admin的角色,为ttt用户创建了user的角色,最后使用@符号为角色创建权限,admin角色读写权限,user角色读权限。ok,配置已经完成,执行开起命令:启动服务器,-d表示守护线程后台运行,-r表示指定目录。否则虽然服务可正常启动,但是客户端用的时候可能会产生问题查看是否启动成功:客户端连接:svn地址:svn://ip/test然后输入用户名:test,密码:test

  3. CentOS7+Apache+SVN安装配置,并通过HTTP方式访问

    即"write"为可读可写,"read"为只读,"none"表示无访问权限。缺省值:read2.auth-access控制鉴权用户访问版本库的权限。缺省值:passwd4.authz-db指定权限配置文件名,通过该文件可以实现以路径为基础的访问控制。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部