首頁 > 開發者 > JavaScript
js中document.write和document.writeln的區別，
兩者都是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>
Write和Writeln的區別
Write不可以換行，Writeln可以換行。
如何查看Writeln的換行效果
在網頁中是看不到writeln的換行效果的，它是被瀏覽器表現為一個空格顯示出來了。
在HTML檔案和JSP的源檔案中都看不到效果，讀者可以在標籤中加入預格式標籤查看效果
幫客之家小編補充：可以在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和Firefox50.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查看
注意：
Note: document.writeln (like document.write) does not work in XHTML documentswrite和writeln在XHTML檔案不起作用，HTML就是文法相對寬鬆的XHTML，這也就解釋為什麼在html沒有出現換行。點我查看。
html，xhtml和xml的定義：
1、html即是超文字標記語言 (HTML)（Hyper Text Markup Language），是最早寫網頁的語言，但是由於時間早，規範不是很好，大小寫混寫且編碼不規範；
2、xhtml即是升級版的html（Extensible Hyper Text Markup Language），對html進行了規範，編碼更加嚴謹純潔，也是一種過渡語言，html向xml過渡的語言；
3、xml即時可延伸標記語言 (XML)（Extensible Markup Language），是一種跨平台語言，編碼更自由，可以自由建立標籤。
4、網頁編碼從html>>xhtml>>xml這個過程發展。
html，xhtml和xml的區別：
1、xhtml對比與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，XHTML是HTML向XML 過度的一個橋樑。而xml是web發展的趨勢。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
