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

使用

element.insertAdjacentHTML(position, text);

position是相對于元素的位置，并且必須是以下字符串之一：
'beforebegin'
元素自身的前面。
'afterbegin'
插入元素內部的第一個子節(jié)點之前。
'beforeend'
插入元素內部的最后一個子節(jié)點之后。
'afterend'
元素自身的后面。
text是要被解析為HTML或XML,并插入到DOM樹中的字符串。

注意

beforebegin和afterend位置,僅在節(jié)點在樹中且節(jié)點具有一個parent元素時工作.

兼容性

基本沒有兼容性問題

image.png

參考

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML