document.write與writeln的輸出內(nèi)容區(qū)別說明

更新時(shí)間：2010年10月24日 15:47:07 作者：

document.write()和document.writeln都是JavaScript向客戶端寫入的方法，writeln是以行方式輸出的，但并不是指頁面實(shí)際效果中的換行，兩種方法在查看源代碼時(shí)才看得出區(qū)別。

document.write() //將內(nèi)容寫入文檔，當(dāng)前編輯位置為寫入的內(nèi)容的后一個(gè)字符
document.writeln() //將內(nèi)容寫入文檔，并添加一個(gè)換行符，當(dāng)前編輯位置為寫入的內(nèi)容的后一行

document.write()和document.writeln都是JavaScript向客戶端寫入的方法，writeln是以行方式輸出的，但并不是指頁面實(shí)際效果中的換行，兩種方法在查看源代碼時(shí)才看得出區(qū)別，除非是輸出到pre或xmp元素內(nèi)

測(cè)試一下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

運(yùn)行上面的代碼，在新開的窗口中:查看－源文件，就可以看到，writeln是以行方式輸出

實(shí)際效果的區(qū)別在于：源代碼中的換行，會(huì)導(dǎo)致實(shí)際效果中的一個(gè)“空格”對(duì)比以下例子來體會(huì)：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

輸入結(jié)果其實(shí)是：111 222

所以在應(yīng)用中，使用write會(huì)比writeln更為方便，不會(huì)產(chǎn)生不必要的空格效果，所以我的Html與Js在線互轉(zhuǎn)小工具[http://www.dhdzp.com/tools/html-js.htm]特地將網(wǎng)上大多數(shù)使用writeln的方式改為write，相信會(huì)給大家?guī)矸奖恪?

關(guān)于保留格式，測(cè)試一下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

document.write()和document.writeln()的區(qū)別 + 用js寫動(dòng)態(tài)select

解決思路：

兩者都是JavaScript向客戶端輸出的方法，對(duì)比可知寫法上的差別是一個(gè)ln--line的簡(jiǎn)寫，換言之，writeln 方法是以行輸出的，相當(dāng)于在?winte?輸出后加上一個(gè)換行符。

注意：document.write方法可以用在兩方面:在網(wǎng)頁載入過程中用實(shí)時(shí)腳本創(chuàng)建網(wǎng)頁內(nèi)容以及用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容.該方法需要一個(gè)字符串參數(shù),它是寫到窗口或框架中的HTML內(nèi)容.該字符串參數(shù)可以是變量或值為字符串的表達(dá)式,寫入內(nèi)容常常包含HTML標(biāo)記.

記住,載入網(wǎng)頁后,瀏覽器輸出流將自動(dòng)關(guān)閉.在些之后任何一個(gè)對(duì)當(dāng)前網(wǎng)頁的document.write()方法都將打開一個(gè)新的輸出流,它將清除當(dāng)前網(wǎng)頁輸出內(nèi)容(包括源文檔中的任何變是和值).因此,如果希望用腳本生成的HTML內(nèi)容替換當(dāng)前網(wǎng)頁,就必須把HTML內(nèi)容連接起來賦給一個(gè)變量.這里,使用document.write()來完成寫操作.不必清除文檔并打開一個(gè)新的數(shù)據(jù)流,一個(gè)document.write()調(diào)用就OK了.

關(guān)于document.write()方法,還需要說明它的相關(guān)方法document.close().腳本向窗口(不管是本窗口還是其它窗口)寫完內(nèi)容后必須關(guān)閉輸出流.在腳本的最后一個(gè)document.write() 方法后面.必須確保有document.close()方法.不這樣做就不能顯示圖像和表單.而且,后面調(diào)用的任何document.write() 只會(huì)將內(nèi)容追加到網(wǎng)頁后,而不會(huì)清除現(xiàn)有內(nèi)容,寫入新值

具體步驟：

1.打開一個(gè)空白窗口。
window.open()

2.用 write 方法向空白窗口寫入代碼。

document.write("Line1")
document.write("Line1")

3.用 writeln 方法向空白窗口寫入代碼。

document.writeln("Line1")
document.writeln("Line2")

4．完整代碼示例：

復(fù)制代碼代碼如下:

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

注意：兩種方法僅當(dāng)在查看源代碼時(shí)才看得出區(qū)別。
特別提示：把上面的代碼加入網(wǎng)頁中，然后查看彈出窗口的源代碼，將會(huì)看到：

Line1Line1Line1
Line2

頁面效果和源代碼如圖。

特別說明

總的來說，一般情況下用兩種方法輸出的效果在頁面上是沒有區(qū)別的(除非是輸出到pre或xmp元素內(nèi))。

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

頁面初始化時(shí)可以正確寫在select框內(nèi)
但調(diào)用時(shí)就寫在控件外了，不知道document.write()能否想改變innerHTML或outerHTML來動(dòng)態(tài)寫HTML?以及寫的HTML要用來顯示該如何處理？

如下：

復(fù)制代碼代碼如下:

 
<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> 

關(guān)于保留格式，測(cè)試一下：<script> document.write("<pre>我在pre中不會(huì)換行!")document.write("我在pre中不會(huì)換行!")document.writeln("我在pre中會(huì)換行!")document.writeln("我在pre中會(huì)換行!")document.writeln("我在pre中會(huì)換行!</pre>") </script>

您可能感興趣的文章: