码迷,mamicode.com
首页 > Web开发 > 详细

嫌innerHTML性能不够好,推荐几个新方法

时间:2016-06-19 11:32:15      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

innerHTML我们都很熟悉,并且在初学js的时候用的很多,也很方便,比一个个创建dom元素,再利用appendChild拼接方便多了,但是当我们要处理的量比较大时,innerHTML就GG了,看过网上别人分享的一些改进方法,在这里也整理一下分享给大家。

第一种解决方案:

使用insertAdjacentHTML()方法,

这个方法接收两个参数,一个是where,一个是text,

where是指插入的位置,有四个可选值,分别为:

  1. beforeBegin: 插入到标签开始前
  2. afterBegin:插入到标签开始标记之后
  3. beforeEnd:插入到标签结束标记前
  4. 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代码,具体实现方法如下:

方法思想:

  1. 首先创建一个容器,这里是div;
  2. 然后将要追加的html代码添加到这个容器中;
  3. 取出这个容器中的所有节点,遍历每一个节点;
  4. 创建一个文档片段,fragment=document.createDocumentFragment();
  5. 将节点复制到文档片段中,这里使用cloneNode函数执行深复制;
  6. 最后将文档片段追加到元素中。
 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/

 

嫌innerHTML性能不够好,推荐几个新方法

标签:

原文地址:http://www.cnblogs.com/luxueping/p/5597520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!