嫌innerHTML性能不够好,推荐几个新方法
2016-06-19 10:16
696 查看
innerHTML我们都很熟悉,并且在初学js的时候用的很多,也很方便,比一个个创建dom元素,再利用appendChild拼接方便多了,但是当我们要处理的量比较大时,innerHTML就GG了,看过网上别人分享的一些改进方法,在这里也整理一下分享给大家。
第一种解决方案:
使用insertAdjacentHTML()方法,
这个方法接收两个参数,一个是where,一个是text,
where是指插入的位置,有四个可选值,分别为:
beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后
text即为html文本,例如“<li></li>”;
关于四个位置参数的解析请看代码:
先看一下html结构是这样的:
1、beforeBegin: 插入到标签开始前:
在浏览器中的查看代码是这样的:
2、afterBegin:插入到标签开始标记之后
在浏览器中是这样的:
3、beforeEnd:插入到标签结束标记前
在浏览器中是这样的:
4、afterEnd:插入到标签结束标记后
在浏览器:
关于第二个参数,可以是一个字符串参数,像这样:
各大浏览器的新版本都已经支持这个方法。具体的版本支持情况可以自行百度。
再来一个自制的方法:appendHTML();
如果你了解appendChild方法,应该能猜到,appendHTML方法就是在一个元素之后追加一段html代码,具体实现方法如下:
方法思想:
首先创建一个容器,这里是div;
然后将要追加的html代码添加到这个容器中;
取出这个容器中的所有节点,遍历每一个节点;
创建一个文档片段,fragment=document.createDocumentFragment();
将节点复制到文档片段中,这里使用cloneNode函数执行深复制;
最后将文档片段追加到元素中。
可以这样使用:
分别产生的效果是:(还是利用上面的html代码结构)
参考资料:
http://www.zhangxinxu.com/
第一种解决方案:
使用insertAdjacentHTML()方法,
这个方法接收两个参数,一个是where,一个是text,
where是指插入的位置,有四个可选值,分别为:
beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后
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代码,具体实现方法如下:
方法思想:
首先创建一个容器,这里是div;
然后将要追加的html代码添加到这个容器中;
取出这个容器中的所有节点,遍历每一个节点;
创建一个文档片段,fragment=document.createDocumentFragment();
将节点复制到文档片段中,这里使用cloneNode函数执行深复制;
最后将文档片段追加到元素中。
function appendHTML(ele,html,site){ var div=document.createElement("div"), nodes=null, fragment=document.createDocumentFragment(); div.innerHTML=html; nodes=div.childNodes; for(var i=0,len=nodes.length;i<len;i++){ fragment.appendChild(nodes[i].cloneNode(true)); } site=site||"before"; site !== "before"? ele.appendChild(fragment) : ele.insertBefore(fragment, ele.firstChild); // 回收内存 nodes=null; fragment=null; }
可以这样使用:
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/