JavaScript中document.write与document.writeln的区别详解

document.write与writeln的基本区别

document.write与document.writeln均为JavaScript中用于向客户端输出内容的方法。两者的主要区别在于写法：writeln中的“ln”是“line”的缩写，意味着该方法在输出内容后会附加一个换行符。

document.write的使用场景与注意事项

需要注意的是，document.write方法主要有两种应用场景：一是在网页加载过程中实时生成内容，二是通过延时脚本创建当前窗口或新窗口的内容。该方法接收一个字符串参数，该参数可以是变量或值为字符串的表达式，代表写入窗口或框架中的HTML内容。

务必注意，当网页加载完成后，浏览器的输出流会自动关闭。在此之后，任何对当前网页调用document.write()的行为都会打开一个新的输出流，这将清除当前网页的现有内容（包括源文档中的变量和值）。因此，若希望用脚本生成的HTML内容替换当前网页，必须将所有HTML内容连接起来赋值给一个变量，然后使用一次document.write()完成写入。无需手动清除文档或打开新数据流，单次调用即可完成操作。

关于document.write()方法，还需说明其相关方法document.close()。当脚本向窗口（无论是当前窗口还是其他窗口）写入内容后，必须调用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等预格式化元素内部）。

向指定位置写入HTML

二、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='"+i+"'>"+i+"</option>");
}
function openWrite(){
var win=window.open(); 
win.document.write("Line1");
win.document.write("Line1");
win.document.write("<input type='text' value='1234567890' />");
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>我在pre中不会换行!")
document.write("我在pre中不会换行!")
document.writeln("我在pre中会换行!")
document.writeln("我在pre中会换行!")
document.writeln("我在pre中会换行!</pre>") 
</script> 

Write与Writeln的核心差异

Write和Writeln的区别

Write方法不会换行，而Writeln方法可以换行。

查看换行效果的方法

如何查看Writeln的换行效果

在网页中无法直接看到writeln的换行视觉效果，因为浏览器将其表现为一个空格。在HTML文件和JSP源文件中也看不到明显的换行效果，读者可以在标签中加入预格式标签（如pre）来查看实际效果。

本站小编补充：可以通过Chrome浏览器的F12开发者工具查看。

<script>
   document.write("<pre>write");
   document.writeln("writln");
   document.write("write</pre>");
</script>

除了上述方法，读者也可以使用open方法重新打开一个窗口来查看效果。

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

在弹出的窗口中查看网页源文件，即可看到换行效果。笔者经过测试，在Chrome 56.0.2924.3版本的弹出窗口中没有“查看源文件”这一栏，此时可以点击“检查”，然后在Element一栏中查看效果。IE11和Firefox 50.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='button' value='我是按钮'/>"); 
    </script> 
  </head> 
  <body> 
  </body> 
</html> 

通过Chrome的F12开发者工具查看。

XHTML中的兼容性问题

注意：

write和writeln在XHTML文件中不起作用。HTML的语法相对宽松，而XHTML较为严格，这也就解释了为什么在HTML中看不到换行效果。点我查看。

HTML、XHTML与XML的定义与区别

html，xhtml和xml的定义：

1、HTML即超文本标记语言（Hyper Text Markup Language），是最早用于编写网页的语言。由于出现时间较早，其规范不够完善，存在大小写混写且编码不规范的问题； 2、XHTML即扩展超文本标记语言（Extensible Hyper Text Markup Language），是对HTML的规范化升级，编码更加严谨，也是一种过渡语言，作为从HTML向XML过渡的桥梁； 3、XML即可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，允许自由创建标签。 4、网页编码的发展经历了从HTML到XHTML再到XML的过程。

html，xhtml和xml的区别：

1、与HTML相比，XHTML文档具有良好且完整的排版，体现在两方面：a、元素必须拥有结束标签；b、元素必须正确嵌套； 2、对于HTML中的元素和属性，XHTML必须使用小写，因为XML严格区分大小写，<li>和<LI>被视为不同的标签； 3、XHTML中的属性值必须包含在引号中； 4、XHTML不支持属性最小化。什么是属性最小化？ 正确:非最小化属性(unminimized attributes) <input checked="checked"> 不正确:最小化属性(minimized attributes) <input checked> 5、在XHTML中，name属性已被弃用，将在未来版本中被删除。

网页编码的发展历程

再说说为什么网页编码要从HTML>>XHTML>>XML这样发展？

早期的网页使用HTML语言编写，但它存在三个严重缺点：

1、编码不规范，结构混乱臃肿，需要智能终端才能良好显示； 2、表现与结构混乱，不利于开发和维护； 3、无法兼容更多网络设备，如手机、PDA等。 因此，HTML需要发展以解决这些问题，于是W3C制定了XHTML，作为从HTML向XML过渡的桥梁。而XML则是Web发展的趋势。