insertBefore的用法用法介紹

更新：2023-05-30 11:39

一、insertBefore的概述

insertBefore()方法是Javascript的一個(gè)內(nèi)置方法，常被用來(lái)在DOM(Document Object Model)中進(jìn)行節(jié)點(diǎn)的插入。在DOM中，每個(gè)網(wǎng)頁(yè)元素都被稱(chēng)為節(jié)點(diǎn)，這些節(jié)點(diǎn)之間通過(guò)父子、兄弟等關(guān)系連接成一個(gè)樹(shù)形結(jié)構(gòu)。

insertBefore()主要用于將新節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之前，就是在目標(biāo)節(jié)點(diǎn)前插入一個(gè)新的節(jié)點(diǎn)。同時(shí)，它還可以在一個(gè)已存在的父節(jié)點(diǎn)中將自身插入到任意的位置。

二、insertBefore的語(yǔ)法

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

node.insertBefore(newnode, existingnode);

其中，參數(shù)解釋如下：

node：需要插入新節(jié)點(diǎn)的父元素節(jié)點(diǎn)。
newnode：需要插入到目標(biāo)元素之前的新節(jié)點(diǎn)。
existingnode：目標(biāo)元素節(jié)點(diǎn)。

三、insertBefore的應(yīng)用

1、向節(jié)點(diǎn)中添加新元素

在實(shí)際開(kāi)發(fā)中，我們經(jīng)常需要?jiǎng)討B(tài)向一個(gè)列表或表單的某個(gè)位置插入一個(gè)新元素或一組新元素。例如，在以下的例子中，我們可以向一個(gè)網(wǎng)頁(yè)中的無(wú)序列表中添加新的項(xiàng)目：

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

現(xiàn)在我們想要在第二個(gè)元素之前插入一個(gè)新元素，可以使用以下代碼：

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);

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

2、移動(dòng)元素的位置

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

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

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

3、添加元素的事件處理函數(shù)

在開(kāi)發(fā)Web應(yīng)用程序時(shí)，我們經(jīng)常需要將事件處理程序添加到動(dòng)態(tài)創(chuàng)建的元素中。如果元素在頁(yè)面加載時(shí)就已經(jīng)存在，我們可以使用addEventListener()方法來(lái)為元素添加事件處理程序。但如果元素是后期添加的，則需要使用類(lèi)似下面的方法：

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

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

四、insertBefore的在HTML中的示例

接下來(lái)，我們將演示如何在一個(gè)HTML表單中使用insertBefore()方法，將新的數(shù)據(jù)輸入框插入到列表項(xiàng)之后：

<!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>

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

五、結(jié)束語(yǔ)

作為Javascript的內(nèi)置方法之一，insertBefore()經(jīng)常被用于在節(jié)點(diǎn)中進(jìn)行元素的插入、移動(dòng)和其他一些相關(guān)的操作。通過(guò)使用它，我們可以方便地將新元素添加到現(xiàn)有節(jié)點(diǎn)中，并且靈活地控制節(jié)點(diǎn)的位置。在實(shí)際的開(kāi)發(fā)過(guò)程中，合理地運(yùn)用insertBefore()方法可以使我們的代碼更加簡(jiǎn)潔高效。

該文章在 2023/12/1 11:35:46 編輯過(guò)

關(guān)鍵字查詢(xún)

介紹

insert

相關(guān)文章

正在查詢(xún)...