JavaScript如何添加子節點

# JavaScript如何添加子節點

在JavaScript中，操作DOM（文檔對象模型）是前端開發的核心技能之一。其中，**添加子節點**是常見的DOM操作需求。本文將介紹幾種常用的方法，幫助開發者靈活地實現子節點的動態添加。

---

## 1. `appendChild()` 方法

`appendChild()` 是最基礎的添加子節點方法，用于將指定節點添加到父節點的子節點列表末尾。

```javascript
const parent = document.getElementById('parent');
const child = document.createElement('div');
child.textContent = '我是新添加的子節點';
parent.appendChild(child);

特點： - 只能添加一個節點。 - 若節點已存在于文檔中，會將其從原位置移動到新位置。

2. append() 方法（ES6新增）

append() 是ES6引入的更靈活的替代方案，支持同時添加多個節點或文本內容。

const parent = document.querySelector('.container');
const child1 = document.createElement('p');
const child2 = document.createTextNode('一段文本');
parent.append(child1, child2, '直接插入的字符串');

特點： - 可一次插入多個節點或字符串。 - 不會返回插入的節點。

3. insertBefore() 方法

若需在指定位置插入子節點（而非末尾），可使用insertBefore()。

const parent = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = '新項目';
const referenceNode = parent.children[1]; // 第二個子節點
parent.insertBefore(newItem, referenceNode);

參數說明： - 第一個參數：待插入的節點。 - 第二個參數：參照節點（新節點會插入到其之前）。

4. insertAdjacentHTML() 方法

此方法允許通過HTML字符串快速插入節點，支持四種插入位置：

const parent = document.getElementById('target');
parent.insertAdjacentHTML('beforeend', '<div>插入到內部末尾</div>');

插入位置選項： - beforebegin：元素之前。 - afterbegin：元素內部開頭。 - beforeend：元素內部末尾（常用）。 - afterend：元素之后。

5. 性能優化建議

頻繁操作DOM可能引發重排（Reflow）和重繪（Repaint），影響性能。推薦： - 使用DocumentFragment批量添加節點。 - 盡量減少直接操作DOM的次數。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('div');
  fragment.appendChild(item);
}
document.body.appendChild(fragment);

通過掌握這些方法，開發者可以高效地實現動態內容更新，提升用戶體驗。根據實際場景選擇合適的方法，是編寫高質量JavaScript代碼的關鍵。 “`