`appendChild()` 和 `insertBefore()` 是 JavaScript 中用于向 DOM(文檔對象模型)中插入新節(jié)點的方法。
`appendChild()` 方法用于將一個新節(jié)點添加到指定節(jié)點的子節(jié)點列表的末尾。
javascript
var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
parentElement.appendChild(newElement);
上述代碼中,我們首先通過 `getElementById()` 方法獲取到一個父元素節(jié)點 `parentElement`,然后使用 `createElement()` 方法創(chuàng)建一個新的 `div` 元素節(jié)點 `newElement`。接下來,我們使用 `appendChild()` 方法將 `newElement` 添加為 `parentElement` 的子節(jié)點。這樣,`newElement` 就會成為 `parentElement` 的最后一個子節(jié)點。
`insertBefore()` 方法用于將一個新節(jié)點插入到指定節(jié)點的子節(jié)點列表的指定位置。
javascript
var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
var referenceElement = document.getElementById("reference");
parentElement.insertBefore(newElement, referenceElement);
上述代碼中,我們同樣通過 `getElementById()` 方法獲取到一個父元素節(jié)點 `parentElement`,然后使用 `createElement()` 方法創(chuàng)建一個新的 `div` 元素節(jié)點 `newElement`。此外,我們還通過 `getElementById()` 方法獲取到一個參考節(jié)點 `referenceElement`,該節(jié)點將作為插入位置的參考。接下來,我們使用 `insertBefore()` 方法將 `newElement` 插入到 `parentElement` 的子節(jié)點列表中,位于 `referenceElement` 之前的位置。
這兩種方法都是用來動態(tài)地向 DOM 中插入新節(jié)點的常用方法,可以根據(jù)具體的需求選擇合適的方法來操作 DOM 樹。