js中document.write和document.writeln的區(qū)別
兩者都是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．完整代碼示例：
<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要用來顯示該如何處理？
如下：
<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>
Write和Writeln的區(qū)別
Write不可以換行，Writeln可以換行。
如何查看Writeln的換行效果
在網(wǎng)頁中是看不到writeln的換行效果的，它是被瀏覽器表現(xiàn)為一個空格顯示出來了。
在HTML文件和JSP的源文件中都看不到效果，讀者可以在標(biāo)簽中加入預(yù)格式標(biāo)簽查看效果
腳本之家小編補(bǔ)充：可以在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>
然后在彈出的窗口中查看網(wǎng)頁源文件，就可看到效果。筆者經(jīng)過測試，在chrome 56.0.2924.3中的彈出窗口中沒有查看源文件這一欄，這時候可以“檢查”然后在Element一欄可看到效果，IE11和Firefox50.0中都有查看源文件一欄。
腳本之家補(bǔ)充：
<html>
<head>
<title>document.write</title>
<script>
document.write("hello");
document.writeln("world");//document.writeln()不能換行，只是多了空格，相當(dāng)于\r\n
document.writeln("world");
document.write("<br/>");
document.write("hu");
//輸出一個按鈕，注意多個引號的嵌套問題
document.write("<input type='button' value='我是按鈕'/>");
</script>
</head>
<body>
</body>
</html>
通過chrome的F12查看
注意：
write和writeln在XHTML文件不起作用，HTML就是語法相對寬松的XHTML，這也就解釋為什么在html沒有出現(xiàn)換行。點我查看。
html，xhtml和xml的定義：
1、html即是超文本標(biāo)記語言（Hyper Text Markup Language），是最早寫網(wǎng)頁的語言，但是由于時間早，規(guī)范不是很好，大小寫混寫且編碼不規(guī)范；
2、xhtml即是升級版的html（Extensible Hyper Text Markup Language），對html進(jìn)行了規(guī)范，編碼更加嚴(yán)謹(jǐn)純潔，也是一種過渡語言，html向xml過渡的語言；
3、xml即時可擴(kuò)展標(biāo)記語言（Extensible Markup Language），是一種跨平臺語言，編碼更自由，可以自由創(chuàng)建標(biāo)簽。
4、網(wǎng)頁編碼從html>>xhtml>>xml這個過程發(fā)展。
html，xhtml和xml的區(qū)別：
1、xhtml對比與html，xhtml文檔具有良好完整的排版，體現(xiàn)在兩方面：a、元素必須要有結(jié)束標(biāo)簽；b、元素必須嵌套；
2、對于html的元素和屬性，xhtml必須小寫，因為xml是嚴(yán)格區(qū)分大小寫的，<li>和<LI>是不同的標(biāo)簽；
3、xhtml的屬性值必須在引號之中；
4、xhtml不支持屬性最小化，什么是屬性最小化了？
正確:非最小化屬性(unminimized attributes)
<input checked="checked">
不正確:最小化屬性(minimized attributes)
<input checked>
5、 在xhtml中，name屬性是不贊成使用的，在以后的版本中將被刪除。
再說說為什么網(wǎng)頁編碼要從html>>xhtml>>xml這么發(fā)展？
話說早起的網(wǎng)頁使用html語言編寫的，但是它擁有三個嚴(yán)重的缺點：
1、編碼不規(guī)范，結(jié)構(gòu)混亂臃腫，需要智能的終端才能很好的顯示；
2、表現(xiàn)和結(jié)構(gòu)混亂，不利于開發(fā)和維護(hù)；
3、不能使用更多的網(wǎng)絡(luò)設(shè)備，比如手機(jī)、PDA等；
因此HTML需要發(fā)展才能解決這個問題，于是W3C又制定了XHTML，XHTML是HTML向XML 過度的一個橋梁。而xml是web發(fā)展的趨勢。
相關(guān)文章
這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
大家在寫div+css的時候經(jīng)常會用到彈出層，由于IE6的bug，所以當(dāng)使用多個標(biāo)簽重復(fù)寫彈出層的時候會遇到后面的層壓在了彈出層的上面;用Jquery給彈出層的z軸依次增加高度可解決.代碼很簡單，效果很顯著,需要了解的朋友可以參考下2012-12-12
本文以一個簡單的小例子，簡述在微信小程序開發(fā)中左右分欄功能的實現(xiàn)方式，主要涉及scroll-view ，列表數(shù)據(jù)綁定，及簡單樣式等內(nèi)容，感興趣的朋友跟隨小編一起看看吧2019-05-05
js統(tǒng)計頁面的來訪次數(shù)實現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計頁面的來訪次數(shù),需要的朋友可以參考下2014-05-05
在 Webpack 配置文件?webpack.config.js 中,可以使用 CopyWebpackPlugin 插件實現(xiàn)將特定文件復(fù)制到dist目錄,這篇文章主要介紹了webpack打包攜帶某個文件到dist目錄的配置方法,需要的朋友可以參考下2024-04-04
在項目開發(fā)中我們常需要給某些數(shù)據(jù)定義一個唯一標(biāo)識符,便于尋找關(guān)聯(lián),這篇文章主要給大家介紹了關(guān)于JS生成id的多種解決方案,文中介紹的方法都非常實用,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript模擬鼠標(biāo)右鍵菜單效果的實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務(wù)器的負(fù)擔(dān),本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JavaScript中DOM和BOM原理詳析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解
這篇文章主要介紹了使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解，文章通過示例代碼和圖文解析介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08