js节点使用 碎片节点

Posted 2020-10-03 -xgaox-

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);

这么看着就高大上了吧！！！