jQuery append 對應原生 JavaScript：appendChild 與 insertAdjacentHTML

jQuery $(parent).append(htmlString) 在原生 JS 中有兩種等價方案，視場景選擇。

方案一：appendChild（節點操作）

// 創建元素節點
var div = document.createElement('div');
div.textContent = 'Hello';
parent.appendChild(div); // 只接受 Node，不接受字符串

方案二：insertAdjacentHTML（字符串解析，性能更優）

// 直接解析 HTML 字符串並插入
parent.insertAdjacentHTML('beforeend', '<div>Hello</div>');
// 位置參數：beforebegin | afterbegin | beforeend | afterend

對比表

最佳實踐

• 構建少量已知安全結構 → insertAdjacentHTML 簡潔高效。
• 需保留節點引用/綁定事件 → createElement + appendChild。
• 用戶輸入內容 → 必須轉義或用 textContent 設置文本，杜絕 XSS。

現代框架（React/Vue）底層同樣依賴這兩類原生 API 實現虛擬 DOM 打補丁。