DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 嫌innerHTML性能不夠好,推薦幾個新方法
嫌innerHTML性能不夠好,推薦幾個新方法
編輯:JavaScript基礎知識     

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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved