HTML DOM 元素 insertBefore()
示例
- 建立 <li> 元素
- 建立文字節點
- 將文字附加到 <li> 元素
- 在 <ul> 中的第一個子元素之前插入 <li> 元素
const newNode = document.createElement("li");
const textNode = document.createTextNode("水");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);
自己動手試一試 »
將最後一個元素從一個列表移動到另一個列表的開頭
const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);
自己動手試一試 »
將最後一個元素從一個列表移動到另一個列表的末尾
const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);
自己動手試一試 »
描述
insertBefore() 方法在現有子節點之前插入一個子節點。
另請參閱
語法
element.insertBefore(new, existing)或
node.insertBefore(new, existing)
引數
| 引數 | 描述 |
| new | 必需。 要插入的節點（元素）。 |
| 現有節點 | 必需。 在其之前插入的節點（元素）。 如果為 null，它將被插入到末尾。 |
返回值
| 型別 | 描述 |
| 節點 | 插入的節點。 |
瀏覽器支援
element.insertBefore() 是 DOM Level 1 (1998) 特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
