js中document.write和document.writeln的区别-js教程-PHP中文网

首页

web前端

js教程

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

亚连

May 31, 2018 am 10:29 AM

javascript

这篇文章主要介绍了js中document.write和document.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．完整代码示例：

<script> 
with(window.open()){ 
document.write("Line1") 
document.write("Line1") 
document.writeln("Line1") 
document.writeln("Line2") 
} 
</script>

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

Line1Line1Line1
Line2

页面效果和源代码如图。

特别说明

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

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

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

如下：

<html>
<head>
</head>
<script type="text/javascript">
function creatOption(){
for(i=0;i<5;i++)
document.write("<option  value=&#39;"+i+"&#39;>"+i+"</option>");
}
function openWrite(){
var win=window.open(); 
win.document.write("Line1");
win.document.write("Line1");
win.document.write("<input type=&#39;text&#39; value=&#39;1234567890&#39; />");
win.document.writeln("Line1");
win.document.writeln("Line2");
}
</script>
<body>
<select id="myselect" name="myselect">
<script  language="javascript">
  creatOption();
</script>
</select>
<input type="button" value="按钮" onclick="openWrite()"/>
</body>
</html>

关于保留格式，测试一下：

<script> 
document.write("<pre class="brush:php;toolbar:false">我在pre中不会换行!")
document.write("我在pre中不会换行!")
document.writeln("我在pre中会换行!")
document.writeln("我在pre中会换行!")
document.writeln("我在pre中会换行!

Write和Writeln的区别

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

如何查看Writeln的换行效果

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

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

<script>
   document.write("<pre class="brush:php;toolbar:false">write");
   document.writeln("writln");
   document.write("write

");

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

<script> 
with(window.open()){ 
document.write("write") 
document.writeln("writeln") 
document.writeln("write") 
}
</script>

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

脚本之家补充：

<html> 
  <head> 
    <title>document.write</title>     
    <script> 
      document.write("hello"); 
      document.writeln("world");//document.writeln()不能换行，只是多了空格，相当于\r\n 
      document.writeln("world"); 
      document.write("<br/>"); 
      document.write("hu"); 
      //输出一个按钮，注意多个引号的嵌套问题 
      document.write("<input type=&#39;button&#39; value=&#39;我是按钮&#39;/>"); 
    </script> 
  </head> 
  <body> 
  </body> 
</html>

通过chrome的F12查看

注意：

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是严格区分大小写的，25edfb22a4f469ecb59f1190150159c6和8c0e9d2c5e6a7ea41578d97b4d80f7d8是不同的标签；
　　3、xhtml的属性值必须在引号之中；
　　4、xhtml不支持属性最小化，什么是属性最小化了？
　　正确:非最小化属性(unminimized attributes)
　　9bace9a3372146183b72454b915e9de7
　　不正确:最小化属性(minimized attributes)
　　153585c75b2b229bb11ac227e33ac62e
　　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的区别的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。