詳解JavaScript的insertAdjacentElement方法

一、insertAdjacentElement方法介紹

insertAdjacentElement()是DOM API中非常實用的一個方法，它可以將一個元素節點插入到另一個元素節點的指定位置上。該方法可以實現局部動態更新DOM結構，提高應用程序的性能。該方法的調用形式如下：

element.insertAdjacentElement(position, newElement);

其中，element表示已存在於DOM結構中的元素節點；position表示插入的位置；newElement表示要插入的新元素節點。

二、position參數詳解

insertAdjacentElement()方法的第一個參數position表示要插入的位置，該參數可以有以下四個值：

• “beforebegin”：在element之前插入newElement
• “afterbegin”：在element內部的子元素之前插入newElement
• “beforeend”：在element內部的子元素之後插入newElement
• “afterend”：在element之後插入newElement

下面的代碼展示了在html中使用insertAdjacentElement()方法插入一個節點：

// 先獲取需要插入的節點
var newElement = document.createElement("div");
newElement.innerHTML = "I am a new element.";

// 在元素id="example"之前插入節點
var exampleElement = document.getElementById("example");
exampleElement.insertAdjacentElement("beforebegin", newElement);

三、插入多個節點

除了insertAdjacentElement()方法可以插入單個元素節點外，還提供了insertAdjacentHTML()方法和insertAdjacentText()方法來插入HTML內容和純文本內容。

insertAdjacentHTML()方法可以將HTML字元串插入到指定的位置，它的參數和位置屬性的含義和insertAdjacentElement()方法相同。

insertAdjacentText()方法則可以插入純文本內容。

下面的示例演示了如何在同一位置使用插入多個節點的三種方法：

// 插入單個元素節點
var exampleElement = document.getElementById("example");
var newElement = document.createElement("p");
newElement.innerHTML = "I am a new paragraph.";
exampleElement.insertAdjacentElement("beforeend", newElement);

// 插入HTML內容
var exampleElement = document.getElementById("example");
var newHTML = "
I am a new paragraph.
";
exampleElement.insertAdjacentHTML("beforeend", newHTML);

// 插入純文本內容
var exampleElement = document.getElementById("example");
var textNode = document.createTextNode("I am a new paragraph.");
exampleElement.insertAdjacentText("beforeend", textNode);

四、插入到多個位置

使用insertAdjacentElement()方法也可以將同一個元素節點插入到多個位置。

下面的代碼演示了如何使用insertAdjacentElement()方法將同一個元素節點插入到多個位置上：

// 插入同一個元素節點多次
var exampleElement = document.getElementById("example");
var newElement = document.createElement("p");
newElement.innerHTML = "I am a new paragraph.";
exampleElement.insertAdjacentElement("beforeend", newElement);
exampleElement.insertAdjacentElement("afterend", newElement.cloneNode(true));

五、總結

insertAdjacentElement()方法是JavaScript中非常常用的DOM操作方法之一，它可以方便地將元素節點插入到DOM結構的指定位置。通過掌握insertAdjacentElement()方法的各個參數和調用方式，我們可以在開發中更加高效地操作DOM結構，提高應用程序的性能。