js中document.write和document.writeln的区别

这篇文章主要介绍了js中document.writedocument.writeln的区别,需要的朋友可以参考下

两者都是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.完整代码示例:

 with(window.open()){ document.write("Line1") document.write("Line1") document.writeln("Line1") document.writeln("Line2") } 

登录后复制

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

Line1Line1Line1
Line2

页面效果和源代码如图。

js中document.write和document.writeln的区别

特别说明

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

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

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

如下:

function creatOption(){for(i=0;i<5;i++)document.write(""+i+"");}function openWrite(){var win=window.open(); win.document.write("Line1");win.document.write("Line1");win.document.write("");win.document.writeln("Line1");win.document.writeln("Line2");}  creatOption();

登录后复制

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

 document.write("
我在pre中不会换行!")document.write("我在pre中不会换行!")document.writeln("我在pre中会换行!")document.writeln("我在pre中会换行!")document.writeln("我在pre中会换行!

登录后复制")

Write和Writeln的区别

Write不可以换行,Writeln可以换行。 

如何查看Writeln的换行效果

在网页中是看不到writeln的换行效果的,它是被浏览器表现为一个空格显示出来了。
在HTML文件和JSP的源文件中都看不到效果,读者可以在标签中加入预格式标签查看效果

脚本之家小编补充:可以在chrome通过f12查看

   document.write("
write");   document.writeln("writln");   document.write("write

登录后复制");

除了上面这种读者也可以用open方法重新打开一个窗口来查看

 with(window.open()){ document.write("write") document.writeln("writeln") document.writeln("write") }

登录后复制

然后在弹出的窗口中查看网页源文件,就可看到效果。笔者经过测试,在chrome 56.0.2924.3中的弹出窗口中没有查看源文件这一栏,这时候可以“检查”然后在Element一栏可看到效果,IE11和Firefox50.0中都有查看源文件一栏。

脚本之家补充:

        document.write                document.write("hello");       document.writeln("world");//document.writeln()不能换行,只是多了空格,相当于       document.writeln("world");       document.write("
"); document.write("hu"); //输出一个按钮,注意多个引号的嵌套问题 document.write("");           

登录后复制

通过chrome的F12查看

js中document.write和document.writeln的区别

注意:

Note: document.writeln (like document.write) does not work in XHTML documents

write和writeln在XHTML文件不起作用,HTML就是语法相对宽松的XHTML,这也就解释为什么在html没有出现换行。点我查看。

html,xhtml和xml的定义:

  1、html即是超文本标记语言(Hyper Text Markup Language),是最早写网页的语言,但是由于时间早,规范不是很好,大小写混写且编码不规范;
  2、xhtml即是升级版的html(Extensible Hyper Text Markup Language),对html进行了规范,编码更加严谨纯洁,也是一种过渡语言,html向xml过渡的语言;
  3、xml即时可扩展标记语言(Extensible Markup Language),是一种跨平台语言,编码更自由,可以自由创建标签。
  4、网页编码从html>>xhtml>>xml这个过程发展。

html,xhtml和xml的区别:

  1、xhtml对比与html,xhtml文档具有良好完整的排版,体现在两方面:a、元素必须要有结束标签;b、元素必须嵌套;
  2、对于html的元素和属性,xhtml必须小写,因为xml是严格区分大小写的,

和是不同的标签;
  3、xhtml的属性值必须在引号之中;
  4、xhtml不支持属性最小化,什么是属性最小化了?
  正确:非最小化属性(unminimized attributes)
  
  不正确:最小化属性(minimized attributes)
  
  5、 在xhtml中,name属性是不赞成使用的,在以后的版本中将被删除。

再说说为什么网页编码要从html>>xhtml>>xml这么发展?

  话说早起的网页使用html语言编写的,但是它拥有三个严重的缺点:

  1、编码不规范,结构混乱臃肿,需要智能的终端才能很好的显示;
  2、表现和结构混乱,不利于开发和维护;
  3、不能使用更多的网络设备,比如手机、PDA等;
  因此HTML需要发展才能解决这个问题,于是W3C又制定了XHTML,XHTML是HTML向XML 过度的一个桥梁。而xml是web发展的趋势。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

解决vue 路由变化页面数据不刷新的问题

解决vue单页使用keep-alive页面返回不刷新的问题

vue 多入口文件搭建 vue多页面搭建的实例讲解

以上就是js中document.write和document.writeln的区别的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2753049.html

(0)
上一篇 2025年3月8日 06:32:52
下一篇 2025年3月8日 06:33:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Javascript 编码约定(编码规范)

    这篇文章主要介绍了javascript 编码约定(编码规范),需要的朋友可以参考下 1、使用 strict 模式 在一个作用域(包括函数作用域、全局作用域)中,可以使用 “use strict”; 来开启 stric…

    编程技术 2025年3月8日
    200
  • HTML文档内嵌入JS方法汇总

    这次给大家带来HTML文档内嵌入JS方法汇总,HTML文档内嵌入JS的注意事项有哪些,下面就是实战案例,一起来看一下。 在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内嵌,放置在和…

    编程技术 2025年3月8日
    200
  • JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)

    这篇文章主要介绍了javascript获取移动设备型号的实现代码,需要的朋友可以参考下 我们一般在浏览器里识别用户的访问设备都是通过 User Agent 这个字段来获取的,但是通过它我们只能获取一个大概的信息,比如你用的是 Mac 还是 …

    编程技术 2025年3月8日
    200
  • 详解JS常见的BUG和错误处理

    这次给大家带来详解JS常见的BUG和错误处理,详JS常见BUG和错误处理的注意事项有哪些,下面就是实战案例,一起来看一下。 计算机程序中的缺陷通常称为 bug。 它让程序员觉得很好,将它们想象成小事,只是碰巧进入我们的作品。 实际上,当然,…

    编程技术 2025年3月8日
    200
  • js经验分享 JavaScript反调试技巧

    在这篇文章中,我打算跟大家总结一下关于javascript反调试技巧方面的内容。值得一提的是,其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了,需要的朋友可以参考下 在此之前,我一直都在研究JavaScript相关的反调试技巧。但是当…

    2025年3月8日
    200
  • JS内this指向使用实例详解

    这次给大家带来JS内this指向使用实例详解,JS内this指向使用的注意事项有哪些,下面就是实战案例,一起来看一下。 在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下…

    编程技术 2025年3月8日
    200
  • JS加载方式使用汇总

    这次给大家带来JS加载方式使用汇总,JS加载方式使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一:同步加载 我们平时使用的最多的一种方式。 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进…

    编程技术 2025年3月8日
    200
  • 如何操作JS生成指随机数与随机序列

    这次给大家带来如何操作JS生成指随机数与随机序列,JS生成指随机数与随机序列的注意事项有哪些,下面就是实战案例,一起来看一下。 在JavaScript中我们经常使用Math.random()方法生成随机数,但是该方法生成的随机数只是0-1之…

    编程技术 2025年3月8日
    200
  • 怎样操作JS文件内加载jquery.js(附代码)

    这次给大家带来怎样操作JS文件内加载jquery.js(附代码),操作JS文件内加载jquery.js的注意事项有哪些,下面就是实战案例,一起来看一下。 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他JS文…

    2025年3月8日
    200
  • 关于js的三种使用方式案例详解(附代码)

    这次给大家带来关于js的三种使用方式案例详解(附代码),js的三种使用方式的注意事项有哪些,下面就是实战案例,一起来看一下。 1、行内js:js不单独写出 js使用方式1:行内js 登录后复制 2、内部js:script里的程序整个页面都可…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论