element.insertAdjacentHTML

一、概念

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解释器的转换，性能会好一点。