document.write與writeln的輸出內容區別說明
編輯：JavaScript基礎知識
document.write() //將內容寫入文檔，當前編輯位置為寫入的內容的後一個字符
document.writeln() //將內容寫入文檔，並添加一個換行符，當前編輯位置為寫入的內容的後一行
document.write()和document.writeln都是JavaScript向客戶端寫入的方法，writeln是以行方式輸出的，但並不是指頁面實際效果中的換行，兩種方法在查看源代碼時才看得出區別，除非是輸出到pre或xmp元素內
測試一下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
運行上面的代碼，在新開的窗口中:查看－源文件，就可以看到，writeln是以行方式輸出
實際效果的區別在於：源代碼中的換行，會導致實際效果中的一個“空格”對比以下例子來體會：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
輸入結果其實是：111 222
所以在應用中，使用write會比writeln更為方便，不會產生不必要的空格效果，所以我的Html與Js在線互轉小工具[http://www.jb51.net/tools/html-js.htm]特地將網上大多數使用writeln的方式改為write，相信會給大家帶來方便。
關於保留格式，測試一下：
[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>
document.writeln() //將內容寫入文檔，並添加一個換行符，當前編輯位置為寫入的內容的後一行
document.write()和document.writeln都是JavaScript向客戶端寫入的方法，writeln是以行方式輸出的，但並不是指頁面實際效果中的換行，兩種方法在查看源代碼時才看得出區別，除非是輸出到pre或xmp元素內
測試一下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
運行上面的代碼，在新開的窗口中:查看－源文件，就可以看到，writeln是以行方式輸出
實際效果的區別在於：源代碼中的換行，會導致實際效果中的一個“空格”對比以下例子來體會：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
輸入結果其實是：111 222
所以在應用中，使用write會比writeln更為方便，不會產生不必要的空格效果，所以我的Html與Js在線互轉小工具[http://www.jb51.net/tools/html-js.htm]特地將網上大多數使用writeln的方式改為write，相信會給大家帶來方便。
關於保留格式，測試一下：
[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>
相關文章
- jQuery DOM 操作（基本操作、內部插入、外部插入、包裹操作）
- HTMl5的存儲方式sessionStorage和localStorage詳解
- DOM中事件處理概覽與原理的全面解析
- 使用JavaScriptCore實現OC和JS交互詳解
- JavaScript實現父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執行順序的方法
- JavaScript 輸出顯示內容(document.write、alert、innerHTML、console.log)
- 原生的強大DOM選擇器querySelector介紹
- JS獲取DropDownList的value值與text值的示例代碼
- window.showModalDialog()返回值的學習心得總結
- js window.onload 加載多個函數和追加函數詳解
小編推薦
熱門推薦