Element.insertAdjacentHTML(position, text)

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

语法：Element.insertAdjacentHTML(position, text)
其中position的值是相对于element来说的，并且有且只有以下几种情况：

1. beforebegin 在element元素之前
2. afterbegin 在element元素第一个节点之前
3. beforeend 在element 元素最后一个节点之后
4. 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