Element.insertAdjacentHTML(position, text)

insertAdjacentHTML()方法是将制定的文本（text）解析为HTXL或者XML后插入到制定的位置（position）处，而且不会影响到Element内部已经存在的节点

语法：

Element.insertAdjacentHTML(position, text)

其中position的值是相对于element来说的，并且有且只有以下几种情况：

beforebegin 在element元素之前

afterbegin 在element元素第一个节点之前

beforeend 在element 元素最后一个节点之后

afterend 在element元素之后

text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

位置名称示意：

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

注意： 只有当元素节点在一个DOM树中，且有一个父元素时，beforebegin 和 afterend 位置才会起作用。

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>

浏览器兼容性：

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)	Firefox Mobile (Gecko)	Android	Safari Mobile
1.0	8.0 (8.0)	4.0	7.0	4.0 (527)	8.0 (8.0)	？	？

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