JavaScript 局部 DOM 更新：innerHTML 精準替換指定容器內容

需求：在頁面特定區塊輸出數字/文字，不影響其他元素。

最小可行代碼

<div id="output-area"></div>

<script>
document.getElementById('output-area').textContent = '你的數字或文字';
</script>

關鍵點

1. 容器鎖定：`
   ` 作為唯一掛載點。
2. 精準選取：`document.getElementById('output-area')` 獲取單一元素引用。
3. 安全賦值：使用 `textContent`（純文字）或 `innerHTML`（需信任內容），直接替換該容器**所有子節點**，不波及頁面其他區域。

進階：模板化渲染函數

function renderNumber(containerId, number) {
    const el = document.getElementById(containerId);
    if (!el) return console.error('Container not found:', containerId);
    el.textContent = number;
}

// 使用
renderNumber('output-area', Math.floor(Math.random() * 10000000).toString().padStart(7, '0'));

避坑指南

• ❌ `document.write()`：會重寫整個文檔，破壞現有 DOM。
• ❌ 重複 `id`：導致 `getElementById` 只返回第一個，更新錯誤位置。
• ❌ `innerHTML` 插入未轉義用戶輸入：XSS 風險。
• ✅ 單一職責容器 + `textContent` + 存在性檢查。

此模式適用於所有「局部資料綁定」場景：驗證碼顯示、計數器、即時價格、通知徽章等。