我们向Dom中写入HTML文本，通常使用innerHTML或者innerText（textContent）;其实还有insertAdjacentHTML和insertAdjacentText这两个方法。并且更加灵活，插入内容更加方便。而且兼容性很好，IE6貌似都能兼容。
先来做个简单的例子。假如html内容如下，我们要动态往Ul中追加内容。
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul> 01.
02.
03.
04.
05.
06.
通常我们会做3步。如下
var _li = document.createElement('li'); //1、创建元素
_li.innerHTML = '内容5'; //2、写入内容
document.querySelector('ul').appendChild(_li); //3、插入到ul中 01.
02.
03.
当我们使用insertAdjacentHTML，只需下面一行代码就可以；
document.querySelector('ul').insertAdjacentHTML("beforeend", '<li>内容</li>');01.
并且还提供了多个地方插入文本。
beforebegin //在 element 元素的前面。
afterbegin //在 element 元素的第一个子元素前面。
beforeend //在 element 元素的最后一个子元素后面。
afterend //在 element 元素的后面。 01.
02.
03.
04.
点击下面按钮测试。
再来举个例子。我们要向Dom中的开头添加元素。会使用insertBefore；如果Dom中没有子元素，我们还要去判断一下，再利用appendChild去插入，否则会报错(至少在IE中)，如下代码；
if(dom.children.length){
//如果有子元素，就使用insertBefore
dom.insertBefore(_li,dom.children[0])
}else{
//没有子元素，使用appendChild
dom.appendChild(_li)
}; 01.
02.
03.
04.
05.
06.
07.
现在使用insertAdjacentHTML，依然只有一句话，不管里面有没有子元素。
element.insertAdjacentHTML("afterbegin", '<p>内容</p>'); 01.
以上两个方法，第二个参数都必须是字符串，假如已经有dom节点或者已经createElement出来了一个元素，需要插入怎么办？还有一个叫做 insertAdjacentElement ，使用方法相同，第二参数可以是create出来的节点获取其他dom元素。
var _dom = document.createElement('p');
_dom.innerHTML = '测试';
element.insertAdjacentElement("beforeend", _dom);01.
02.
03.
var _dom = document.querySelector('.ele');
element.insertAdjacentElement("beforeend", _dom ); 01.
02.
需要注意的是，insertAdjacentHTML是插入文本会解析html标签，insertAdjacentText不会解析html标签，但是火狐不支持这个insertAdjacentText，不过我们可以做下兼容。如下代码；
另外insertAdjacentElement在火狐中也不支持，同样使用下面的兼容代码
（更多…）
