insertBefore的用法用法介紹

更新：2023-05-30 11:39

一、insertBefore的概述

insertBefore()方法是Javascript的一個內置方法，常被用來在DOM(Document Object Model)中進行節點的插入。在DOM中，每個網頁元素都被稱為節點，這些節點之間通過父子、兄弟等關系連接成一個樹形結構。

insertBefore()主要用于將新節點插入到指定節點之前，就是在目標節點前插入一個新的節點。同時，它還可以在一個已存在的父節點中將自身插入到任意的位置。

二、insertBefore的語法

在使用insertBefore()方法前，需要先定義三個參數：

node.insertBefore(newnode, existingnode);

其中，參數解釋如下：

node：需要插入新節點的父元素節點。
newnode：需要插入到目標元素之前的新節點。
existingnode：目標元素節點。

三、insertBefore的應用

1、向節點中添加新元素

在實際開發中，我們經常需要動態向一個列表或表單的某個位置插入一個新元素或一組新元素。例如，在以下的例子中，我們可以向一個網頁中的無序列表中添加新的項目：

<ul id="list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

現在我們想要在第二個元素之前插入一個新元素，可以使用以下代碼：

var newItem = document.createElement("li");
var textNode = document.createTextNode("New Item");
newItem.appendChild(textNode);
var list = document.getElementById("list");
var secondItem = document.getElementsByTagName("li")[1];
list.insertBefore(newItem, secondItem);

這個代碼塊中，我們首先創建一個新的li元素，并將其作為一個子節點連接到一個文本節點之后。然后，我們通過getElementById()方法獲取要插入的頂級列表元素，并且通過getElementsByTagName()方法獲取到第二個li元素。最后，在list節點中使用insertBefore()方法，將新元素插入到第二個元素之前。

2、移動元素的位置

insertBefore()方法不僅可以插入新元素，也可以將一個已存在的元素從一個位置移動到另一個位置。

var item = document.getElementById("item");
var list = document.getElementById("list");
list.insertBefore(item, list.childNodes[0]);

這個代碼塊中，我們使用了getElementById()方法來獲取要移動的元素，并且使用insertBefore()方法，將該元素插入到列表中的第一個位置。

3、添加元素的事件處理函數

在開發Web應用程序時，我們經常需要將事件處理程序添加到動態創建的元素中。如果元素在頁面加載時就已經存在，我們可以使用addEventListener()方法來為元素添加事件處理程序。但如果元素是后期添加的，則需要使用類似下面的方法：

var btn = document.createElement("BUTTON");
btn.innerHTML = "Click me";
btn.onclick = function() {
  alert("Button clicked.");
};
document.body.appendChild(btn);

首先，我們創建一個按鈕元素，并設置內部HTML代碼和onclick()事件處理程序。然后，我們使用appendChild()方法將按鈕追加到文檔的末尾。

四、insertBefore的在HTML中的示例

接下來，我們將演示如何在一個HTML表單中使用insertBefore()方法，將新的數據輸入框插入到列表項之后：

<!DOCTYPE html>
<html>
<head>
  <title>使用insertBefore()方法添加元素</title>
  <script>
    function addItem() {
      var newItem = document.createElement("li");
      var input = document.createElement("input");
      input.type = "text";
      newItem.appendChild(input);
      var list = document.getElementById("list");
      var button = document.getElementById("btnAdd");
      if (button.nextSibling) {
        list.insertBefore(newItem, button.nextSibling);
      } else {
        list.appendChild(newItem);
      }
    }
  </script>
</head>
<body>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <button id="btnAdd" onclick="addItem()">Add New Item</button>
</body>
</html>

在這個代碼塊中，我們使用createElement()方法動態創建了一個新的文本輸入框，然后使用insertBefore()方法將其插入到Add New Item按鈕之后的列表項之前。如果按鈕沒有相鄰元素，則將輸入框追加到列表的末尾。