JavaScript insertAdjacentHTML（）的使用

寄义：
insertAdjacentHTML() 将指定的文本剖析为HTML或XML，并将效果节点插入到DOM树中的指定位置。它不会重新剖析它正在使用的元素，因此它不会粉碎元素内的现有元素。这克制了额外的序列化步调，使其比直接innerHTML操纵更快。 用法：

1. 1 element.insertAdjacentHTML(position, text);

复制代码

名词表明：
　　　　1.element:目的元素；
　　　　2.insert:插入；
　　　　3.Adjacent: 与…毗连的; 相近的；
　　　　4.HTML:各人用的html结构；
　　　　
　　　　text:一段字符串，此方法会将其剖析为节点对象，然后插入目的元素指定位置；
　　　　positon:规定被插入的位置的关键字；

position有四个参数选项：
　　　　1.beforebegin:规定在目的元素的外部开始位置插入。
　　　　2.afterbegin:规定在目的元素的内部开始位置插入。
　　　　3.beforeend:规定在目的元素的内部竣事位置插入。
　　　　4.afterend:规定在目的元素的外部竣事位置插入。

弄个图会更清楚点：

重点留意：该方法会将指定的文本剖析为HTML或XML（也就是说标签会被剖析）

实例：

1. 1  2  3      4          5          6          7             #bluerec { 8                 width:200px; 9                 height:150px;10                 background-color:blue;11             }12             p {13                 width:100px;14                 height:80px;15                 background-color:red;16             }17         18     19      20     
2. 21         22         
3. 23         
4. 24         25         26         36     37

复制代码

现实效果：

对上述代码的剖析：
　　　　1.初始状态：一条分割线、蓝色div、按钮
　　　　2.点击按钮后：在蓝色div上插入了p标签，代替了分割线的位置，分割线位置上移

使用场景：必要在原有元素附近追加元素时，比起innerHTML服从更高，兼容性更好