DIV CSS 佈局教程網

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>