innerHTML我們都很熟悉,並且在初學js的時候用的很多,也很方便,比一個個創建dom元素,再利用appendChild拼接方便多了,但是當我們要處理的量比較大時,innerHTML就GG了,看過網上別人分享的一些改進方法,在這裡也整理一下分享給大家。
第一種解決方案:
使用insertAdjacentHTML()方法,
這個方法接收兩個參數,一個是where,一個是text,
where是指插入的位置,有四個可選值,分別為:
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代碼,具體實現方法如下:
方法思想:
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>