01/9
2017
以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。
appendChild：在父级元素内追加新元素。 insertBefore：在父级元素内的某个元素之前插入新元素。
但是这两个方法的参数只能接收元素对象，不能使用字符形式的html代码，而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。
insertAdjacentHTML可以将字符串形式的html代码（需要能解析为DOM元素）解析为一个节点，并将其追加到指定元素的指定位置。
insertAdjacentHTML方法的语法如下：
element.insertAdjacentHTML(position, text);
position参数有以下四个值（都是字符串形式）：
beforebegin：在元素的开始位置之前插入。 beforeend：在元素的结束位置之前插入。 afterbegin：在元素的开始位置之后插入。 afterend：在元素的结束位置之后插入。
text参数则是字符串形式的html代码。
根据position参数，我们可以将新元素插入到到指定元素的四个位置：
示例：
<div id="a">
<div></div>
</div>
<script type="text/javascript" defer>
var a=document.querySelector("#a");
a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");
</script>
结果如下：
<div id="a"> <a href="">xxx</a> <div></div> </div>
insertAdjacentHTML方法的兼容性表现良好，主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法：
document.documentElement.insertAdjacentHTML
此外，由于insertAdjacentHTML是根据位置插入元素的，因此它不能把新元素插入到img、input等单标签元素里（想这么做的人才是有毛病吧）。
相关文档：《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》
ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。
insertAdjacentElement方法除了第二个参数是DOM节点（不能是字符串形式）外和insertAdjacentHTML方法都一样。
insertAdjacentText方法则只接收字符串格式的参数，并输出为字符串。其他地方也和insertAdjacentHTML方法一样。
