嫌innerHTML性能不夠好，推薦幾個新方法

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. 最后將文檔片段追加到元素中。

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/