js節點使用 片段節點

標籤：bsp   ted   資料   data   屬性   app   方法   att   set   

js節點，都知道3大類：

元素節點

屬性節點

文本節點

常用的呢元素節點，屬性節點。還有倆方法，setAttribute()  getAttribute(),設定和擷取屬性值

在實際工作中呢，長長我們從後台拿到一串資料，要在前台頁面展示。
我們寫好一個html母片後，用for迴圈，在母片中加入資料，最後插入頁面。這個呢就是思路！

為了快捷方便，常常這麼幹，

var str="";

for(var i=0;i<data.length;i++){

　　str+="<div>"+data[i].detail+"</div>";

}

$(‘div‘).innerHTML=str;

但是這樣呢，影響頁面效能，在設定一些屬性什麼的時候不方便，太多的字串拼接容易出錯，重要的是顯得很不專業！！

在大神的提點下，開始用這個鬼！

var fragment=document.createDocumentFragment();

fragment  就是一個節點片段

此時我們可以這麼幹了

for(var i=0;i<data.length;i++){

　　var div=document.createElement(‘div‘);

　　div.className="ml";

　　div.innerHTML=data[i].detail；

　　fragment.appendChild(div);

}

$(‘div‘).appendChild(fragment);

這麼看著就高大上了吧！！！

js節點使用 片段節點