insertAdjacentElement 與 insertAdjacentHTML 的常見錯誤解析

在 DOM 操作中，insertAdjacentElement 和 insertAdjacentHTML 是經常用來將新內容，插入到現有元素特定位置的兩個方法。

然而，這兩個方法有關鍵差異，新手往往容易混淆，導致錯誤的操作。

本文將透過以下範例分析常見的誤用情況，並解釋如何正確地使用這兩個方法。

案例程式碼

以下是一段示範程式碼，目的是將數列的元素逐一插入到 HTML 列表中。

程式碼嘗試使用 insertAdjacentElement 將列表項目 (<li>) 插入到選定的 #list 元素的後方，但這裡出現了錯誤：

const list = [1, 2, 3, 4, 5];
const listGroup = document.querySelector("#list");

console.log(listGroup);

// listGroup.insertAdjacentElement("afterend", "<li>123</li>");

list.forEach((item) => {
  listGroup.insertAdjacentElement("afterend", `<li>${item}</li>`);
});

錯誤解釋

在上述程式碼中，有兩處使用了 insertAdjacentElement 方法來插入列表項目，但這導致了兩個問題：

1. 方法混淆：insertAdjacentElement 只接受一個 DOM 元素（Element），而不是 HTML 字串。
   
   在範例中，<li>${item}</li> 被當作 HTML 字串傳入，這樣會導致 insertAdjacentElement 無法執行。
2. 應使用 insertAdjacentHTML：insertAdjacentHTML 是一個可以插入 HTML 字串的方法，因此適合直接插入字串型的 HTML（如 <li>${item}</li>）。
   
   insertAdjacentHTML 會解析傳入的字串並生成相應的 DOM 元素，再將其插入到指定位置。

insertAdjacentElement 與 insertAdjacentHTML 的區別

讓我們仔細比較這兩個方法：

• insertAdjacentElement：接受兩個參數：
  • 第一個參數為插入的位置，可以是 "beforebegin"、"afterbegin"、"beforeend" 或 "afterend"。
  • 第二個參數必須是一個 DOM 元素，例如 document.createElement("li") 產生的元素。
• insertAdjacentHTML：同樣接受兩個參數：
  • 第一個參數為插入的位置，使用的選項與 insertAdjacentElement 一致。
  • 第二個參數為 HTML 字串，瀏覽器會解析這個字串並插入生成的 DOM 元素。

正確的代碼寫法

在本案例中，應使用 insertAdjacentHTML，這樣可以直接插入 HTML 字串，不需要先將字串轉換為 DOM 元素。

正確的代碼如下：

const list = [1, 2, 3, 4, 5];
const listGroup = document.querySelector("#list");

list.forEach((item) => {
  listGroup.insertAdjacentHTML("beforeend", `<li>${item}</li>`);
});

解釋

• insertAdjacentHTML("beforeend", <li>${item}</li>)：這行程式碼表示在 listGroup 的內部結尾處（即 "beforeend"）插入新的 <li> 元素，並且可以透過字串模版輕鬆生成 HTML 字串。

如果需要使用 insertAdjacentElement

如果一定要使用 insertAdjacentElement，則需要先創建一個 DOM 元素並逐項設置內容。

以下為示範如何正確使用 insertAdjacentElement：

list.forEach((item) => {
  const listItem = document.createElement("li");
  listItem.textContent = item;
  listGroup.insertAdjacentElement("beforeend", listItem);
});

解釋

• document.createElement("li")：創建了一個新的 <li> DOM 元素。
• listItem.textContent = item：將數值設定為元素的內容。
• insertAdjacentElement("beforeend", listItem)：將生成的元素插入到 listGroup 的末尾。

總結

insertAdjacentElement 和 insertAdjacentHTML 是常見的 DOM 操作方法，但兩者之間有重要的區別。一般來說：

• 如果要插入 HTML 字串，使用 insertAdjacentHTML。
• 如果要插入 DOM 元素，使用 insertAdjacentElement。

透過正確理解這兩個方法的區別，可以避免程式碼中的常見錯誤，提升 DOM 操作的效率與程式的可讀性。