您只能在 HTML 輸出中使用 document.write。如果您在文檔加載后使用該方法，會覆蓋整個文檔。
分析
-
HTML輸出流是指當前數據形式是HTML格式的數據，這部分數據正在被導出、傳輸或顯示，所以稱為“流”。
通俗的來說就是HTML文檔的加載過程，如果遇到document.write就會把內容加入到文檔中。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
JavaScript 能夠直接寫入 HTML 輸出流中：
</p>
<script>
document.write("或無言最帥！");
document.write("臭不要臉！");
</script>
<p>
只能在 HTML 輸出流中使用 <strong>document.write</strong>。
如果在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。
</p>
</body>
</html>
頁面顯示的內容為：
JavaScript 能夠直接寫入 HTML 輸出流中：
或無言最帥！（臭不要臉！）
只能在 HTML 輸出流中使用document.write。 如果在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。
-
文檔加載后使用該方法，會覆蓋整個文檔。
那么文檔加載完成后怎么使用document.write呢？我們可以為按鈕綁定事件（這里我綁定onclick事件），如果加載完成后沒有點擊按鈕，那么就不會調用函數，如果點擊了按鈕，調用document.write的話就會覆蓋頁面中的原有信息，進行重寫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
JavaScript 能夠直接寫入 HTML 輸出流中：
</p>
<script>
document.write("或無言最帥！（臭不要臉！）");
</script>
<button onclick="rewrite()">點擊這里</button>
<p>
只能在 HTML 輸出流中使用document.write。
如果在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。
</p>
<script>
function rewrite(){
document.write("或無言仍然最帥！（仍臭不要臉！）");
}
</script>
</body>
</html>
點擊之后頁面顯示的內容為：
或無言仍然最帥！（仍臭不要臉！）
總結
這次遇到了個坑，先前我的函數名用的是write，結果點擊之后啥都沒有了！然后對着別人的代碼一行行對比，結果你猜哪里出了問題？write是js里的關鍵字。。。shit !
參考文獻：
https://blog.csdn.net/qq_37425546/article/details/54868908
https://blog.csdn.net/weixin_36887648/article/details/53418520