我们向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在火狐中也不支持，同样使用下面的兼容代码

;(function(){  
    if(!!window.sidebar && HTMLElement.prototype.insertAdjacentText == undefined) {  
        HTMLElement.prototype.insertAdjacentElement = function(where, node) {  
            switch (where) {  
                case "beforebegin":  
                    this.parentNode.insertBefore(node, this);break;  
                case "afterbegin":  
                    this.insertBefore(node, this.firstChild);break;  
                case "beforeend":  
                    this.appendChild(node);break;  
                case "afterend":  
                    if (this.nextSibling)  
                        this.parentNode.insertBefore(node, this.nextSibling);  
                    else  
                        this.parentNode.appendChild(node);  
                    break;  
            };  
        };  
        HTMLElement.prototype.insertAdjacentText = function(where, txt) {  
            var parsedText = document.createTextNode(txt);  
            this.insertAdjacentElement(where, parsedText);  
        };  
    };  
})(); 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.