JavaScript document.write 無法控制顯示時間：改用 DOM 節點與 setTimeout 實現定時消失

document.write() 僅能在文檔解析階段寫入內容，**無法在頁面載入後動態控制顯示/隱藏或定時移除**。需改用 DOM 操作配合 setTimeout 實現「顯示 2 秒後自動消失」。

錯誤認知

<script>
document.write('訊息');
/* 無法在此設定 2 秒後清除 */
</script>

正確實作：容器元素 + innerHTML + setTimeout

<!DOCTYPE html>
<html>
<body>
  <div id="msgBox"></div>

  <script>
    const el = document.getElementById('msgBox');
    el.innerHTML = '顯示 2 秒';
    el.style.display = 'block'; // 確保可見

    setTimeout(() => {
        el.innerHTML = '';
        // 或 el.style.display = 'none'; 保留佈局空間
    }, 2000);
  </script>
</body>
</html>

進階封裝：可復用的提示函式

function showTempMessage(msg, duration = 2000, containerId = 'msgBox') {
    const el = document.getElementById(containerId);
    if (!el) return;
    el.innerHTML = msg;
    el.style.display = 'block';
    clearTimeout(el._hideTimer);
    el._hideTimer = setTimeout(() => {
        el.innerHTML = '';
        el.style.display = 'none';
    }, duration);
}

// 使用
showTempMessage('操作成功！', 3000);

為什麼不用 document.write？

• 頁面載入後呼叫會**清空整個文檔**重寫。
• 無法針對特定區域更新，違反現代 DOM 操作原則。
• 不利 CSP (Content Security Policy) 部署。

結語

「定時顯示文字」請用 DOM 節點 + setTimeout，棄用 document.write。這樣既符合現代 Web 標準，又能靈活控制樣式、動畫與多訊息佇列。