Saber 酱的抱枕

以往我们插入、移动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方法一样。

使用js的insertAdjacentHTML方法插入元素