write()和writeln()的区别及向指定位置写html

一、document.write()和document.writeln()的区别

两者都是JavaScript向客户端输出的方法,写法上的差别是一个ln, 即 line 的简写. writeln 方法是以行输出的,相当于在输出后加上一个换行符。

注意: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、完整代码示例:

javascript 代码
 
  1. <script> 
  2. with(window.open()){ 
  3. document.write("Line1"

  4. document.write("Line1"

  5. document.writeln("Line1"

  6. document.writeln("Line2"

  7. </script>

注意:两种方法仅当在查看源代码时才看得出区别。

特别提示:把上面的代码加入网页中,然后查看弹出窗口的源代码,将会看到如下换行的结果:

Line1Line1Line1

Line2

页面效果和源代码如图。

write和writeln方法的输出比较

特别说明

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

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

页面初始化时可以正确写在select框内

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

如下:

xml 代码
 
  1. <html>
  2. <head></head>
  3. <script type="text/javascript">
  4. function creatOption(){
  5. for(i=0;i<5;i++)
  6. document.write("<option   value='"+i+"'>"+i+"</option>");
  7. }
  8. function openWrite(){
  9. var win=window.open(); 
  10. win.document.write("Line1");
  11. win.document.write("Line1");
  12. win.document.write("<input type='text' value='1234567890' />");
  13. win.document.writeln("Line1");
  14. win.document.writeln("Line2");
  15. }
  16. </script>
  17.  
  18. <body>
  19. <select id="myselect" name="myselect">
  20. <script language="javascript">
  21.    creatOption();
  22. </script>
  23. </select>
  24. <input type="bu
    tton"
     
    ;
    value="按钮" onclick="openWrite()"/>
  25. </body>
  26. </html>