element.insertAdjacentHTML的用法

element.insertAdjacentHTML的用法

在向一个元素中追加或则插入一段HTML代码时，而不是替换元素的内容时，使用insertAdjacentHTML，要比innerHTML+="content"更好

innerHTML：
含义：

属性设置或获取HTML语法表示的元素的后代。

是将元素中的原来存在的HTML代码进行删除，将新的HTML代码添加到元素上去。

insertAdjacentHTML：
含义：

将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。

优点：
它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
语法:

element.insertAdjacentHTML(position, text);

【position】是相对于元素的位置，并且必须是以下字符串之一：

1. ’beforebegin’：
   元素自身的前面。
2. ’afterbegin’
   插入元素内部的第一个子节点之前。
3. ’beforeend’
   插入元素内部的最后一个子节点之后。
4. ’afterend’
   元素自身的后面。

【text】是要被解析为HTML或XML,并插入到DOM树中的字符串。