标签：
innerHTML我们都很熟悉，并且在初学js的时候用的很多，也很方便，比一个个创建dom元素，再利用appendChild拼接方便多了，但是当我们要处理的量比较大时，innerHTML就GG了，看过网上别人分享的一些改进方法，在这里也整理一下分享给大家。
第一种解决方案：
使用insertAdjacentHTML()方法，
这个方法接收两个参数，一个是where,一个是text,
where是指插入的位置，有四个可选值，分别为：
text即为html文本，例如“<li></li>”；
关于四个位置参数的解析请看代码：
先看一下html结构是这样的：
<ul id="list"> <li>one</li> </ul>
1、beforeBegin: 插入到标签开始前：
var list=document.getElementById("list"); list.insertAdjacentHTML("beforeBegin","<li>two</li>");
在浏览器中的查看代码是这样的：
<li>two</li> <ul> <li>one</li> </ul>
2、afterBegin:插入到标签开始标记之后
var list=document.getElementById("list"); list.insertAdjacentHTML("afterBegin","<li>two</li>");
在浏览器中是这样的：
<ul id="list"> <li>two</li> <li>one</li> </ul>
3、beforeEnd:插入到标签结束标记前
var list=document.getElementById("list"); list.insertAdjacentHTML("beforeEnd","<li>two</li>");
在浏览器中是这样的：
<ul id="list"> <li>one</li> <li>two</li> </ul>
4、afterEnd:插入到标签结束标记后
var list=document.getElementById("list"); list.insertAdjacentHTML("afterEnd","<li>two</li>");
在浏览器：
<ul id="list"> <li>one</li> </ul> <li>two</li>
关于第二个参数，可以是一个字符串参数，像这样：
var html="<li>two</li>"; list.insertAdjacentHTML("afterEnd",html);
各大浏览器的新版本都已经支持这个方法。具体的版本支持情况可以自行百度。
再来一个自制的方法：appendHTML();
如果你了解appendChild方法，应该能猜到，appendHTML方法就是在一个元素之后追加一段html代码，具体实现方法如下：
方法思想：
1 function appendHTML(ele,html,site){ 2 3 var div=document.createElement("div"), 4 nodes=null, 5 fragment=document.createDocumentFragment(); 6 div.innerHTML=html; 7 nodes=div.childNodes; 8 for(var i=0,len=nodes.length;i<len;i++){ 9 fragment.appendChild(nodes[i].cloneNode(true)); 10 } 11 site=site||"before"; 12 site !== "before"? ele.appendChild(fragment) : ele.insertBefore(fragment, ele.firstChild); 13 // 回收内存 14 nodes=null; 15 fragment=null; 16 }
可以这样使用：
appendHTML(list,html,"after");
appendHTML(list,html,"before");
分别产生的效果是：（还是利用上面的html代码结构）
//after <ul id="list"> <li>one</li> <li>two</li> </ul> //before <ul id="list"> <li>two</li> <li>one</li> </ul>
参考资料：
http://www.zhangxinxu.com/
标签：
原文地址：http://www.cnblogs.com/luxueping/p/5597520.html
