㈠ js - 元素節點插入操作總結
在JavaScript中，實現元素中插入節點的操作方法包括insertAdjacentElement、insertAdjacentHTML、insertAdjacentText、innerHTML、appendChild、append和after。這些方法在操作元素時各有特點及適用場景。
insertAdjacentElement、insertAdjacentHTML與insertAdjacentText在插入位置上相似，但操作內容不同。insertAdjacentElement需要插入DOM節點，否則將引發類型錯誤警告。insertAdjacentHTML適用於插入HTML文本信息，解析後形成元素。insertAdjacentText則直接插入文本信息，不進行解析。而innerHTML可設置或獲取HTML語法表示的元素後代，適用於動態更新元素內容。
注意在使用innerText和textContent時，它們分別設置或獲取節點及其後代元素的文本內容。不同之處在於，textContent不僅獲取可見文本，還包含隱藏元素、script標簽內容和style標簽中的內容。
appendChild方法將一個節點附加到指定父節點的子節點列表末尾。若目標節點已存在於文檔樹中，appendChild會將其移動至新位置，而無需先移除節點。append則在Element的最後一個子節點之後插入一組Node或DOMString對象，等價於插入Text節點。與appendChild相比，append不改變節點在DOM樹中的位置。
after方法在目標節點之後插入一組Node或DOMString對象，等價於插入Text節點。此方法提供了一種簡便的元素插入方式，無需關心目標節點的具體位置。這些插入操作方法在實際開發中應根據具體需求靈活選擇，以實現高效、准確的DOM結構管理。
㈡ js數組添加元素
1. JavaScript數組添加元素的方式有多種，例如使用`push`方法或者通過數組字面量擴展。
2. `push`方法是最常用的方法之一，它能夠將一個或多個元素添加到數組的末尾，並返回新數組的長度。
3. 例如，如果我們有一個數組`arr`，並想要在其中添加元素4，我們可以使用以下代碼：
```javascript
let arr = [1, 2, 3];
arr.push(4);
```
這段代碼會輸出數組`[1, 2, 3, 4]`。
4. `push`方法也可以接受多個參數，允許我們一次添加多個元素。
5. 除了`push`方法，我們還可以使用數組字面量擴展運算符`...`來添加元素。這種方法適用於我們需要添加多個元素到數組末尾的情況。
6. 例如，如果我們有一個數組`arr`和一個新元素數組`newElements`，並想要將`newElements`中的元素添加到`arr`的末尾，我們可以使用以下代碼：
```javascript
let arr = [1, 2, 3];
let newElements = [4, 5];
arr = [...arr, ...newElements];
```
這段代碼會輸出數組`[1, 2, 3, 4, 5]`。
7. 如果我們需要更靈活地控制元素添加的位置，我們還可以使用數組的`splice`方法或者通過索引位置來添加元素。
8. 例如，如果我們想要將一個新元素添加到數組的特定位置，我們可以使用以下代碼：
```javascript
let arr = [1, 2, 3];
arr[arr.length] = 4;
```
這段代碼會將元素4添加到數組的末尾。
9. 需要注意的是，如果指定的索引位置已經存在元素，那麼該位置及之後的元素會被向後移動以騰出空間給新元素。
10. 如果不確定具體的位置，通常推薦使用`push`方法或擴展運算符方式，因為它們會自動處理這些細節問題。