01/9
2017
以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。
1 2 | appendChild：在父级元素内追加新元素。insertBefore：在父级元素内的某个元素之前插入新元素。 |
但是这两个方法的参数只能接收元素对象，不能使用字符形式的html代码，而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。
insertAdjacentHTML可以将字符串形式的html代码（需要能解析为DOM元素）解析为一个节点，并将其追加到指定元素的指定位置。
insertAdjacentHTML方法的语法如下：
1 | element.insertAdjacentHTML(position, text); |
position参数有以下四个值（都是字符串形式）：
1 2 3 4 | beforebegin：在元素的开始位置之前插入。beforeend：在元素的结束位置之前插入。afterbegin：在元素的开始位置之后插入。afterend：在元素的结束位置之后插入。 |
text参数则是字符串形式的html代码。
根据position参数，我们可以将新元素插入到到指定元素的四个位置：
示例：
1 2 3 4 5 6 7 | <div id="a"> <div></div></div><script type="text/javascript" defer> var a=document.querySelector("#a"); a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");</script> |
结果如下：
1 2 3 4 | <div id="a"> <a href="">xxx</a> <div></div></div> |
insertAdjacentHTML方法的兼容性表现良好，主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法：
1 | 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方法一样。
