在JS中有關document.write()的用法（詳細教學）
這篇文章主要介紹了JS 中document.write()的用法和清空的原因淺析,需要的朋友可以參考下
可能很多朋友都遇到過這樣的情況，那就是使用document.write()函數向網頁中寫內容的時候，會把文檔中的原來的內容給清空，這一點對於初學者來說算是一個困擾，下面就介紹一下為什麼會出現這種情況，當然也就知道如何避免此種情況的發生了。
先看一段程式碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
document.write("重温 JavaScript");
}
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>從以上程式碼的可以看出document.write()函數將原來的文件內容清空了，下面介紹一下出現此種情況的原因:
window.onload事件是在文檔內容完全加載完畢再去執行事件處理函數，當然文檔流已經關閉了，這個時候執行doucment.writ()函數會自動調用document.open()函數創建一個新的文件流，並寫入新的內容，再透過瀏覽器展現，這樣就會覆蓋原來的內容。不過很多朋友還有會這樣的疑問，為什麼類似下面的情況，原來網頁中的內容不會被覆蓋,代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>在以上代碼中，原來的文檔內容並沒有被清空，這是因為當前文檔流是由瀏覽器創建，並且document.wirte()函數身處其中，也就是執行此函數的時候文檔流並沒有被關閉，這個時候不會調用document.open()函數創建新文檔流，所以也就不會被覆蓋了。可能還有朋友會問為什麼下面的方式還是不行，程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.close();
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>上面使用document.close()關閉文檔流了，為什麼還是不能夠覆蓋原來的內容的，很遺憾，文檔流是由瀏覽器創建，無權手動關閉，document.close()函數只能夠關閉由document.open()函數建立的文件流。看下面的程式碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
function create(){
var newWindow=window.open("","Document","_blank");
newWindow.document.write("Hello JavaScript");
newWindow.document.close();
newWindow.document.write("覆盖后的输出");
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
create();
}
}
</script>
</head>
<body>
<p id="print">Hello JavaScript</p>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>由doucment.open()建立的文件流程就可以由document.close()關閉，那麼第二個document.write()輸出的內容就會覆寫第一個輸出的內容。
非同步引用外部JavaScript時，必須先執行document.open()清空文檔，然後才能執行document.write()，參數寫在body內容的開頭。
如果不先運行document.open()，直接運行document.write()，則無效且Chrome有以下提示：
// asyncWrite.js document.open(); document.write('<p>test</p>'); document.close(); <!-- asyncWrite.html --> <!-- 运行前 --> <body> <script src="asyncWrite.js" async></script> </body> <!-- 运行后 --> <body> <p>test</p> </body>
document. write()也能寫入含有script標籤的字串，但需要轉義。寫入的script標籤中的內容會正常運作。
<!-- 运行前 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<!-- 运行后 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>document.write()可以傳入多個參數。
<!-- 运行前 -->
<body>
<script>
document.write('<h2 id="multiArgument">multiArgument</h2>','<p>test</p>');
</script>
</body>
<!-- 运行后 -->
<body>
<script>
document.write('<h2 id="multiArgument">multiArgument</h2>','<p>test</p>');
</script>
<h2 id="multiArgument">multiArgument</h2>
<p>test</p>
</body>上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是在JS中有關document.write()的用法（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何恢復已清空的瀏覽記錄
Feb 18, 2024 pm 10:05 PM
網頁歷史記錄清空了怎麼恢復日期：2022年6月10日簡介：在日常使用電腦或手機瀏覽器時，我們會經常使用瀏覽器的歷史記錄來查找之前訪問過的網頁。然而，有時我們可能會不小心清空瀏覽器的歷史記錄，導致我們無法找回特定的網頁。在本文中，我將告訴你一些恢復被清空的網頁歷史記錄的方法。方法一：使用瀏覽器恢復功能大多數常見的瀏覽器都提供了恢復歷史記錄的功能，例如Googl
微博怎麼清空內容_微博清空內容教學
Mar 30, 2024 pm 05:51 PM
1.先打開微博APP，點選右下角我的。 2、然後進入個人中心介面，點選左上角的微博。 3.最後進入一個一個的刪除微博資訊即可。
如何處理KB4532693更新後導致桌面遺失？
Dec 27, 2023 am 11:41 AM
我們在使用win10作業系統的電腦時，有時候如果出現了問題故障大家一定會選擇更新系統的補丁。那麼對於KB4532693更新安裝後出現了桌面清空的情況，小編覺得可能是新的補丁還不夠穩定，所以在使用的時候還是有機率會出現問題。我們可以先嘗試卸載補丁即可。詳細步驟就來看下小編是怎麼做的吧~KB4532693更新後桌面清空怎麼辦1、微軟於2月11日開始推送Windows10KB4532693安全補丁，2、系統版本號將更新至18363.657，不過近期有網友發現，3、安裝此更新會導致新的系統問題，Wind
微博怎麼清空草稿箱_微博清空草稿箱教學
Mar 30, 2024 pm 08:31 PM
1.打開新浪微博app，進入右下角【我】。 2.進入後在頁面上方就可以看到草稿箱，然後點選將其開啟。 3.進入後長按想要刪除的草稿作品會出現【刪除草稿】和【清空草稿箱】這兩個選項。 4.點選【清空草稿箱】即可。
粉筆app怎麼清空已經做過的題目 粉筆app清空做過的題目的方法
Mar 12, 2024 pm 01:43 PM
粉筆app怎麼清空已經做過的題目？粉筆app是一款可以直接讓用戶在這上面做題的軟體，這個軟體上面還有很多的視頻課和講義，用戶可以選擇在有wifi的時候將自己需要的視頻和講義下載下來，這樣我們在等公車或是在公車上的時候就可以不耗費流量的看了。有些用戶在這上面做過一些題目，然後想要清空掉做題記錄，下面小編就整理了清空做題記錄的方法供大家參考。粉筆app清空做過的題目的方法粉筆app和網頁端沒有提供清空已做題目的功能，如果想要重新做已完成的題目，需要註冊一個新的帳號來使用。在粉筆APP中，所有
不小心清空了回收站怎麼恢復文件
Feb 21, 2024 pm 06:45 PM
不小心清空了回收站怎麼恢復文件我們在電腦上使用文件時，經常會遇到一些意外情況，比如不小心清空了回收站，導致重要文件被刪除。這時候，很多人可能會覺得慌張，不知道該如何才能恢復被刪除的檔案。但其實，在正確的方法和工具的幫助下，我們還是有機會將這些重要文件恢復出來。本文將為大家介紹一些方法和工具，幫助大家恢復不小心清空的回收站中的文件。首先，我們要明白的一點是，
找到在將一個二進位字串清空（透過移除非空子字串）後，0的數量最少的玩家
Sep 16, 2023 am 10:21 AM
在本文中，我們將討論一個有趣的問題，涉及字串操作和博弈論領域：「透過刪除非空子字串來清空二進位字串，找到剩餘0最少的玩家」。這個問題探索了使用二進位字串進行競技遊戲的概念。我們的目標是在遊戲結束後找出剩餘0最少的玩家。我們將討論這個問題，提供一個C++程式碼實現，並透過一個例子來解釋這個概念。理解問題陳述給兩個玩家一個二進位字串，他們輪流玩遊戲。在每一回合中，玩家移除至少包含一個「1」的非空子字串。當字串變空或字串中沒有“1”時，遊戲結束。無法採取行動的玩家輸掉遊戲。任務是找到最終0
qq信箱怎麼清空已刪除郵件記錄
Mar 20, 2024 pm 09:26 PM
QQ信箱作為我們日常收發電子郵件的重要工具，為我們提供了便利的溝通通訊方式。在日常使用中，我們通常會刪除已讀取或垃圾郵件，但是簡單的刪除並不能徹底清除，那麼為了節省空間並保持郵箱的整潔，清空已刪除郵件是一個很好的習慣。那麼想要徹底刪除這些郵件的用戶們就快來跟著本文一起操作了解吧！ QQ信箱怎麼清空已刪除郵件1、先點選開啟QQ信箱，下滑頁面找到已刪除選項。 2、然後點選進入頁面，選擇右上角的編輯按鍵。 3、接著在底部彈出的選項裡選擇清空。 4.最後確認點擊清空即可1
