JavaScript DOM 操作陷阱：innerHTML 覆蓋導致元素丟失

問題現象

嘗試為同一容器內的兩個元素賦值時，第二個操作報錯 `Cannot set property 'innerHTML' of null`。

錯誤代碼分析

// HTML 結構
<div id="name"><span id="idinfo"></span></div>

// JS 代碼
document.getElementById("name").innerHTML = data.body.nickname;  // ①
document.getElementById("idinfo").innerHTML = data.body.nickname; // ② 報錯

根本原因

語句 ① 將 `#name` 的**所有內部 HTML 替換**為純文本，導致原本嵌套在內部的 `#idinfo` 元素被銷毀。隨後語句 ② 嘗試查找已不存在的元素，返回 `null`，故報錯。

解決方案

方案一：只操作目標元素（推薦）

// 僅更新 span，保留外層 div 結構
document.getElementById("idinfo").innerHTML = data.body.nickname;
// 若需更新外層文本，使用 textContent 或操作子節點
document.getElementById("name").firstChild.textContent = data.body.nickname;

方案二：構建完整 HTML 字符串

const html = `${data.body.nickname}`;
document.getElementById("name").innerHTML = html;

方案三：使用現代 DOM API

const span = document.getElementById("idinfo");
span.textContent = data.body.nickname;  // 更安全，防 XSS
// 或
span.replaceChildren(document.createTextNode(data.body.nickname));

最佳實踐原則

• 優先使用 `textContent` 設置純文本，避免 XSS 風險
• 精確選擇目標元素，避免覆蓋父容器導致子元素丟失
• 複雜結構更新時，考慮 `DocumentFragment` 或虛擬 DOM 庫
• 調試時用 `console.dir(element)` 檢查元素屬性與子節點