js中document.write和document.writeln的區(qū)別
兩者都是JavaScript向客戶端輸出的方法,對(duì)比可知寫(xiě)法上的差別是一個(gè)ln--line的簡(jiǎn)寫(xiě),換言之,writeln 方法是以行輸出的,相當(dāng)于在?winte?輸出后加上一個(gè)換行符
注意:document.write方法可以用在兩方面:在網(wǎng)頁(yè)載入過(guò)程中用實(shí)時(shí)腳本創(chuàng)建網(wǎng)頁(yè)內(nèi)容以及用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容.該方法需要一個(gè)字符串參數(shù),它是寫(xiě)到窗口或框架中的HTML內(nèi)容.該字符串參數(shù)可以是變量或值為字符串的表達(dá)式,寫(xiě)入內(nèi)容常常包含HTML標(biāo)記.
記住,載入網(wǎng)頁(yè)后,瀏覽器輸出流將自動(dòng)關(guān)閉.在些之后任何一個(gè)對(duì)當(dāng)前網(wǎng)頁(yè)的document.write()方法都將打開(kāi)一個(gè)新的輸出流,它將清除當(dāng)前網(wǎng)頁(yè)輸出內(nèi)容(包括源文檔中的任何變是和值).因此,如果希望用腳本生成的HTML內(nèi)容替換當(dāng)前網(wǎng)頁(yè),就必須把HTML內(nèi)容連接起來(lái)賦給一個(gè)變量.這里,使用document.write()來(lái)完成寫(xiě)操作.不必清除文檔并打開(kāi)一個(gè)新的數(shù)據(jù)流,一個(gè)document.write()調(diào)用就OK了.
關(guān)于document.write()方法,還需要說(shuō)明它的相關(guān)方法document.close().腳本向窗口(不管是本窗口還是其它窗口)寫(xiě)完內(nèi)容后必須關(guān)閉輸出流.在腳本的最后一個(gè)document.write() 方法后面.必須確保有document.close()方法.不這樣做就不能顯示圖像和表單.而且,后面調(diào)用的任何document.write() 只會(huì)將內(nèi)容追加到網(wǎng)頁(yè)后,而不會(huì)清除現(xiàn)有內(nèi)容,寫(xiě)入新值
具體步驟:
1.打開(kāi)一個(gè)空白窗口。
window.open()
2.用 write 方法向空白窗口寫(xiě)入代碼。
document.write("Line1")
document.write("Line1")
3.用 writeln 方法向空白窗口寫(xiě)入代碼。
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)在查看源代碼時(shí)才看得出區(qū)別。
特別提示:把上面的代碼加入網(wǎng)頁(yè)中,然后查看彈出窗口的源代碼,將會(huì)看到:
Line1Line1Line1
Line2
頁(yè)面效果和源代碼如圖。
特別說(shuō)明
總的來(lái)說(shuō),一般情況下用兩種方法輸出的效果在頁(yè)面上是沒(méi)有區(qū)別的(除非是輸出到pre或xmp元素內(nèi))。
二、document.write()向指定位置寫(xiě)html
頁(yè)面初始化時(shí)可以正確寫(xiě)在select框內(nèi)
但調(diào)用時(shí)就寫(xiě)在控件外了 ,不知道document.write()能否想改變innerHTML或outerHTML來(lái)動(dòng)態(tài)寫(xiě)HTML?以及寫(xiě)的HTML要用來(lái)顯示該如何處理?
如下:
<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>
Write和Writeln的區(qū)別
Write不可以換行,Writeln可以換行。
如何查看Writeln的換行效果
在網(wǎng)頁(yè)中是看不到writeln的換行效果的,它是被瀏覽器表現(xiàn)為一個(gè)空格顯示出來(lái)了。
在HTML文件和JSP的源文件中都看不到效果,讀者可以在標(biāo)簽中加入預(yù)格式標(biāo)簽查看效果
腳本之家小編補(bǔ)充:可以在chrome通過(guò)f12查看
<script> document.write("<pre>write"); document.writeln("writln"); document.write("write</pre>"); </script>
除了上面這種讀者也可以用open方法重新打開(kāi)一個(gè)窗口來(lái)查看
<script> with(window.open()){ document.write("write") document.writeln("writeln") document.writeln("write") } </script>
然后在彈出的窗口中查看網(wǎng)頁(yè)源文件,就可看到效果。筆者經(jīng)過(guò)測(cè)試,在chrome 56.0.2924.3中的彈出窗口中沒(méi)有查看源文件這一欄,這時(shí)候可以“檢查”然后在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"); //輸出一個(gè)按鈕,注意多個(gè)引號(hào)的嵌套問(wèn)題 document.write("<input type='button' value='我是按鈕'/>"); </script> </head> <body> </body> </html>
通過(guò)chrome的F12查看
注意:
write和writeln在XHTML文件不起作用,HTML就是語(yǔ)法相對(duì)寬松的XHTML,這也就解釋為什么在html沒(méi)有出現(xiàn)換行。點(diǎn)我查看。
html,xhtml和xml的定義:
1、html即是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language),是最早寫(xiě)網(wǎng)頁(yè)的語(yǔ)言,但是由于時(shí)間早,規(guī)范不是很好,大小寫(xiě)混寫(xiě)且編碼不規(guī)范;
2、xhtml即是升級(jí)版的html(Extensible Hyper Text Markup Language),對(duì)html進(jìn)行了規(guī)范,編碼更加嚴(yán)謹(jǐn)純潔,也是一種過(guò)渡語(yǔ)言,html向xml過(guò)渡的語(yǔ)言;
3、xml即時(shí)可擴(kuò)展標(biāo)記語(yǔ)言(Extensible Markup Language),是一種跨平臺(tái)語(yǔ)言,編碼更自由,可以自由創(chuàng)建標(biāo)簽。
4、網(wǎng)頁(yè)編碼從html>>xhtml>>xml這個(gè)過(guò)程發(fā)展。
html,xhtml和xml的區(qū)別:
1、xhtml對(duì)比與html,xhtml文檔具有良好完整的排版,體現(xiàn)在兩方面:a、元素必須要有結(jié)束標(biāo)簽;b、元素必須嵌套;
2、對(duì)于html的元素和屬性,xhtml必須小寫(xiě),因?yàn)閤ml是嚴(yán)格區(qū)分大小寫(xiě)的,<li>和<LI>是不同的標(biāo)簽;
3、xhtml的屬性值必須在引號(hào)之中;
4、xhtml不支持屬性最小化,什么是屬性最小化了?
正確:非最小化屬性(unminimized attributes)
<input checked="checked">
不正確:最小化屬性(minimized attributes)
<input checked>
5、 在xhtml中,name屬性是不贊成使用的,在以后的版本中將被刪除。
再說(shuō)說(shuō)為什么網(wǎng)頁(yè)編碼要從html>>xhtml>>xml這么發(fā)展?
話說(shuō)早起的網(wǎng)頁(yè)使用html語(yǔ)言編寫(xiě)的,但是它擁有三個(gè)嚴(yán)重的缺點(diǎn):
1、編碼不規(guī)范,結(jié)構(gòu)混亂臃腫,需要智能的終端才能很好的顯示;
2、表現(xiàn)和結(jié)構(gòu)混亂,不利于開(kāi)發(fā)和維護(hù);
3、不能使用更多的網(wǎng)絡(luò)設(shè)備,比如手機(jī)、PDA等;
因此HTML需要發(fā)展才能解決這個(gè)問(wèn)題,于是W3C又制定了XHTML,XHTML是HTML向XML 過(guò)度的一個(gè)橋梁。而xml是web發(fā)展的趨勢(shì)。
相關(guān)文章
JS實(shí)現(xiàn)的鼠標(biāo)跟隨代碼(卡通手型點(diǎn)擊效果)
這篇文章主要介紹了JS實(shí)現(xiàn)的鼠標(biāo)跟隨代碼,帶有卡通手型點(diǎn)擊效果.涉及JavaScript鼠標(biāo)事件的響應(yīng)與頁(yè)面元素的動(dòng)態(tài)調(diào)用技巧,需要的朋友可以參考下2015-10-10微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果
本文主要介紹了js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01js canvas實(shí)現(xiàn)星空連線背景特效
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)星空連線背景特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JS設(shè)置時(shí)間無(wú)效問(wèn)題的解決辦法
在發(fā)送短信息驗(yàn)證碼的時(shí)候要用到j(luò)s設(shè)置時(shí)間倒序問(wèn)題,有時(shí)候會(huì)導(dǎo)致js失效問(wèn)題,怎么辦呢?今天小編給大家分享JS設(shè)置時(shí)間無(wú)效問(wèn)題的解決辦法,需要的朋友參考下吧2017-02-02重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告(補(bǔ)充)
這篇文章主要介紹了重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告,需要的朋友可以參考下2014-12-12JavaScript函數(shù)綁定用法實(shí)例分析
這篇文章主要介紹了JavaScript函數(shù)綁定用法,結(jié)合實(shí)例形式分析了javascript函數(shù)綁定的原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-11-11