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

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

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

测试一下：

with(window.open()){
document.write("百度")
document.write("百度")
document.writeln("知道")
document.writeln("知道")
document.writeln("知道")
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

document.writeln("111")
document.writeln("222")

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

输入结果其实是：111 222

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

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

document.write("

百度")
document.write("百度")
document.writeln("知道")
document.writeln("知道")
document.writeln("知道

")

[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．完整代码示例：

代码如下:

<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='"+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>

赞 (0)

相关推荐

  • js document.write()使用介绍

    在载人页面后,浏览器输出流自动关闭:在此之后,任何一个对当前页面进行操作的document.write()方法将打开-个新的输出流.它将清除当前页面内容(包括源文档的任何变量或值).因此．假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量.使用一个document.write()方法完成写操作,不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作. 关于document.write()方法还有一点要说明的是它的相关方法docu

  • 浅谈document.write()输出样式

    js中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容--document.write("content"),这里content就是需要输出的内容:当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量. 既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式.第一种控制方法是应用内部添加样式的方法,比如 复制代

  • 第一个JavaScript入门基础 document.write输出

    如果你有编程基础,学习Javascript是一件很容易的事情,如果你没有编程基础,也不要担心,我们会为你解释每一行代码. 复制代码 代码如下: <html> <body> <script type="text/javascript"> document.write("This is my first javascript"); </script> </body> </html> 我们将跳过HTM

  • js中document.write使用过程中的一点疑问解答

    本人是新手,所以就记录下来了.这个答案是在百度中看到的,所以算是转载. 下面的内容解答了何为如果在页面加载完后如果调用document.write就会覆盖整个文档. 提示中的 [HTML 输出中] 指的是当页面加载的时候. 复制代码 代码如下: <html> <head></head> <body> <script type="text/javascript">document.write("<p>Hel

  • document.open() 与 document.write()

    document.open()  打开一个新的空白文档,在IE下,open有两个默认参数,相当于document.open("text/html",'""),第二个参数只有一个值可选:replace,如果启用了该值,则新建的文档会覆盖当前页面的文档(相当于清空了原文档里的所有元素,且不能后退即,浏览器的后退按钮不可用): 看一个例子: ") document.close(); document.open("text/html",&quo

  • JavaScript中使用document.write向页面输出内容实例

    document.write 命令向页面输出文字 本实例使用 JavaScript 的 document.write 命令向页面输出指定的文字,代码如下: 复制代码 代码如下: <script type="text/javascript"> document.write("我是向页面输出的文字!"); </script> 将上面部分代码,用文本编辑器保存为 write.html(或 write.htm).双击 write.html 运行它(实

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

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

    document.write() //将内容写入文档,当前编辑位置为写入的内容的后一个字符 document.writeln() //将内容写入文档,并添加一个换行符,当前编辑位置为写入的内容的后一行 document.write()和document.writeln都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别,除非是输出到pre或xmp元素内 测试一下: with(window.open()){

  • 用vbs将输出内容写到屏幕以覆盖当前屏幕上的内容的方法

    问: 您好,脚本专家!如何将输出内容写到屏幕以覆盖当前屏幕上的内容? -- KM 答: 您好,KM.如果您确实需要将输出内容写到命令窗口,那么,我们没办法给您提供答案:尽管我们多少已经处理过一些问题,但我们从未找到一种简单.直接的方法可覆盖命令窗口中的信息. 不过,如果您要将信息输出到 Internet Explorer 窗口,那么我们还确实有解决办法.而且马上就可以给出答案: Set objExplorer = CreateObject("InternetExplorer.Applicatio

  • JavaScript弹出新窗口后向父窗口输出内容的方法

    本文实例讲述了JavaScript弹出新窗口后向父窗口输出内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open方法打开一个弹出窗口,然后通过弹出窗口的句柄向父窗口输出信息的方法 <!DOCTYPE html> <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow

  • JSP中使用JSTL按不同条件输出内容的方法

    本文实例讲述了JSP中使用JSTL按不同条件输出内容的方法.分享给大家供大家参考.具体如下: ConditionalContentJSTL.jsp页面: <%@ page language="java" contentType="text/html;charset=UTF-8" %> <%@ taglib uri="/WEB-INF/tld/c-rt.tld" prefix="c-rt" %> <

  • PHP使用缓存即时输出内容(output buffering)的方法

    PHP使用缓存即时输出内容(output buffering)的方法.分享给大家供大家参考.具体如下: $buffer = ini_get('output_buffering'); echo str_repeat(' ',$buffer+1); //防止浏览器缓存 ob_end_flush(); //关闭缓存 for( $i=1; $i<=10; $i++ ){ echo '第 '.$i.' 次输出.'."<br />\n"; flush(); //刷新缓存(直接发送

  • Laravel实现自定义错误输出内容的方法

    本文实例讲述了Laravel实现自定义错误输出内容的方法.分享给大家供大家参考,具体如下: 这里分析一下laravel对于提交的数据进行验证,怎么自定义错误输出的内容 在根目录下运行命令 php artisan make:request PostUpdateRequest 会在app\Http\Requests目录下创建PostUpdateRequest文件 比如我设置 public function rules() { return [ 'posts_title' => 'required',

  • 按上下级层次关系输出内容的PHP代码

    复制代码 代码如下: function getSubComments($parent = 0, $level = 0) { $db = &JFactory::getDBO(); $sql = "..."; // 查询记录的SQL $db->setQuery($sql); $rows = $db->loadObjectList(); $list = array(); // 先从数据得到记录集,再对记录添加level, 父层level = 0,它的下级level = 1

  • 在python中利用dict转json按输入顺序输出内容方式

    一般常规的我们保存数据为dict类型时,系统会自动帮我们排序:但有时我们想按照输入顺序的key:value保存到dict中,而不想要改变顺序,则我们可以通过使用collecions,进行排序. collections是一个python的内建模块. 示例如下: # -*- coding:utf-8 -*- #dic = {} dic = dict() dic['b'] = 1 dic['a'] = 2 dic['b0'] = 3 dic['a1'] = 4 print("dic is:"

  • Python利用prettytable实现格式化输出内容

    Python利用prettytable实现格式化输出内容

    目录 楔子 添加表头.添加行.添加列 输出指定行.指定列 设置表格样式 设置对齐方式 设置边框样式 楔子 我们用 MySQL 客户端查询数据的时候,是以下面这种格式显示的: 内容展示的非常漂亮,而 Python 有一个第三方模块叫 prettytable,专门用来将数据以上面这种格式输出,我们来看一下用法. 添加表头.添加行.添加列 类似于数据库中的表,由表头(或者说字段名),以及每一行的内容组成. from prettytable import PrettyTable # 传入的 name.a

随机推荐