element.insertAdjacentHTML

• 2022 年 4 月 18 日
• 筆記
• DOM, javascript, JavaScript高級

一、概念

insertAdjacentHTML() 方法將指定的文本解析為 Element 元素，並將結果節點插入到DOM樹中的指定位置。它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接使用innerHTML操作更快。

二、比較

在以前，我們習慣使用 DOM 中的 createElement 方法來創建元素，但是當元素內容比較繁雜時，就需要使用 innerHTML 來進行賦值，再在 appendChild 追加到父元素中。appendChild 是不支援追加字元串元素子元素的，而 insertAdjacentHTML 可以支援追加字元串子元素。簡化了程式碼的複雜度。

三、使用方法

語法：

element.insertAdjacentHTML(position, text);

position ：表示插入內容相對於元素的位置，可以是以下幾個有效值中的一個：

• 'beforebegin'：元素自身的前面。
• 'afterbegin'：插入元素內部的第一個子節點之前。
• 'beforeend'：插入元素內部的最後一個子節點之後。
• 'afterend'：元素自身的後面。

<!-- beforebegin -->
<ul>
  <!-- afterbegin -->
    <li></li>
  <!-- beforeend -->
</ul>
<!-- afterend -->

text : 是要被解析為 HTML 或 XML 元素，並插入到 DOM 樹中

使用實例:

// 原 HTML中的程式碼 <div id="hello">hello</div>

var h = document.getElementById('hello');
h.insertAdjacentHTML('afterend', '<div id="world">world</div>');

// 此時，HTML 新結構變成：
// <div id="hello">hello</div><div id="world">world</div>

四、注意事項

1、使用 insertAdjacentHTML 插入用戶輸入的 HTML 內容的時候，需要轉義之後才能使用。

2、如果只是為了插入文本內容（而不是HTML節點），不建議使用這個方法，建議使用node.textContent 或者 node.insertAdjacentText()。因為這樣不需要經過HTML解釋器的轉換，性能會好一點。