×

关于document.writeln()和document.write()那点事

作者:Web前端之家2021.05.11来源:Web前端之家浏览:435评论:0
关键词:js
微信公众号

微信公众号

当我们使用原生Javascript输出一些内容的时候,经常会用到document.writeln()和document.write(),那么如何正确使用他们呢?他们之间有什么区别?OK,我们一起学习下。

HTML DOM writeln() 方法

定义和用法

writeln() 方法与 write() 方法作用相同,外加可在每个表达式后写一个换行符。

语法

document.writeln(exp1,exp2,exp3,...)


参数描述
exp1,exp2,exp3,...可选.要写入的输出流。它们将按顺序被追加到文档中。

浏览器支持

所有主要浏览器都支持 writeln() 方法

实例

write()和writeln()之间的差异:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端之家(www.jiangweishan.com)</title>
</head>
<body>

<p>注意write()方法不会在每个语句后面新增一行:</p>
<pre>
<script>
document.write("Hello World!");
document.write("Have a nice day!");
</script>
</pre>
<p>注意writeln()方法在每个语句后面新增一行:</p>
<pre>
<script>
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</pre>

</body>
</html>

Javascript 中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它(比如在函数中),会覆盖整个文档。

HTML 输出流:当前数据形式是 HTML 格式的数据,这部分数据正被导出、传输或显示,所以称为”流“。

思考: 什么是在 html 输出中使用,什么是文档加载后使用?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web前端之家(www.jiangweishan.com)</title>
</head>
<body>

 <p>JavaScript 能够直接写入 HTML 输出流中:</p>
 <script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
 </script>

 <p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
    document.write("调用了函数,文档被重写");
}
</script>

</body>
 </html>

例子中代码执行到 document.write 就向页面写入,文档加载完成,但未调用函数,所以不会执行函数中的 document.write,当点击按钮,触发了事件,则是在文档加载完成后使用的 document.write,则会覆盖页面中原有信息。

用 javascript 编写的代码只能通过 html/xhtml 文档才能执行,代码一行一行解析,文档在加载的过程中实际是一边加载一边用 document.write 写出内容到屏幕上,而加载完成后,document 就关闭。如果再调用 document.write 往网页上写内容的话,就会重写 document。

document.writeln()和document.write()区别

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

writeln 只是在字符串后面添加上“\r\n”,它并不会在网页显示的时候换行,只是输出的源代码换行而已。

真正要想在显示的时候换行,请使用<br>或<br/>。

<pre>和<code>内的元素在显示的时候会保留源码中的空格或换行符。


温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/javascript20210511.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria