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

2019-11-21 00:11:07

字體：大中小

供稿：網(wǎng)友

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

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

測試一下：

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

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

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

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

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

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

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

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

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

解決思路：

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

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

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

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

具體步驟：

1.打開一個空白窗口。
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)在查看源代碼時才看得出區(qū)別。
特別提示：把上面的代碼加入網(wǎng)頁中，然后查看彈出窗口的源代碼，將會看到：

Line1Line1Line1
Line2

頁面效果和源代碼如圖。

特別說明

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

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

頁面初始化時可以正確寫在select框內(nèi)
但調(diào)用時就寫在控件外了，不知道document.write()能否想改變innerHTML或outerHTML來動態(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)于保留格式，測試一下：<script> document.write("<pre>我在pre中不會換行!")document.write("我在pre中不會換行!")document.writeln("我在pre中會換行!")document.writeln("我在pre中會換行!")document.writeln("我在pre中會換行!</pre>") </script>

上一篇：JQuery EasyUI 對話框的使用方法

下一篇：javascript textContent與innerText的異同分析