document.write 與 innerHTML、innerText 的區別

document.write
直接寫入 HTML 文檔流，若在頁面加載完成后調用會覆蓋整個文檔。常用于動態生成內容，但會破壞現有 DOM 結構，不推薦在現代開發中使用。

document.write("<p>直接寫入文檔</p>");

innerHTML
操作 DOM 元素的 HTML 內容，可解析標簽并渲染。允許修改元素的子節點和 HTML 結構，但存在 XSS 安全風險。適用于需要動態插入復雜 HTML 的場景。

element.innerHTML = "<strong>加粗文本</strong>";

innerText
僅修改元素的純文本內容，自動忽略 HTML 標簽并轉義特殊字符。性能優于 innerHTML 且更安全，但無法處理 HTML 結構。適合僅需更新文本的場景。

element.innerText = "<script>alert('XSS')</script>";

關鍵差異總結

• 解析方式：innerHTML 渲染 HTML 標簽，innerText 輸出純文本，document.write 直接寫入文檔流。
• 安全性：innerText 自動過濾腳本，innerHTML 需手動防 XSS，document.write 可能破壞頁面。
• 使用時機：document.write 僅適合頁面加載階段，后兩者可隨時操作 DOM。

// 安全示例：使用 textContent（類似 innerText 但保留換行）  
element.textContent = "安全文本內容";