首页 > 代码库 > Js中的appenChild,insertBefore--createDocumentFragment
Js中的appenChild,insertBefore--createDocumentFragment
平时项目中会有一些流程，或者是评论相关的东西，这些一般只会是在页面初次加载一部分，剩余部分搞一个更多的标签，当点击更多的时候，ajax请求把所有数据加载完（当然这里也有分页的实现方法，本篇不作讨论), ajax加载的数据一般会运用到appendChild,insertBefore方法来附加在原来标签前后，相信大家对循环附加一定很熟练了，这里我要写的是另一种在性能方面比较赞的方法--运用文档片段,在低版本的IE下，缺少优化机制，循环附加造成的回流和渲染，会让浏览器hold不住（几何改变会造成浏览器重排）
看看一般appendChild做法，当然你可以直接innerHtml或者jquery的Html到容器上，这里是考虑原HTML可能包含事件，才把Html字符串转换为节点。
1 var ele=document.creatElement("div"); 2 3 ele.innerHtml=html;//ajax获取到的 4 5 var divs=ele.childNodes;//所以子节点 6 7 for(var i=0,length=divs.length;i<length;i++) 8 9 {10 11 container.appendChild(divs[i].cloneNode(true));//克隆到需要附加的容器12 13 }
优化:
1 //接上例子2 var fragment=document.createDocumentFragment();3 4 for(var i=0;length=divs.length;i++){5 fragment.apendChild(divs[i].cloneNode(true));6 7 }8 //最后一次性附加到容器9 container.appendChild(fragment);
扩展原型:
1 //IE9+ 2 //IE678隐藏了对HTMLElement的访问 3 //请用var appendHtmlOp=function(el,html){ 4 // el.appendChild(frament);//这里不能用this，this指向了window; 5 //} 6 HTMLElement.prototype.appendHtmlOp=function(html){ 7 var div=document.createElement("div"),nodes=null, 8 fragment=document.createDocumentFragment(); 9 10 div.innerHTML=html;11 nodes=div.childNodes;12 for(var i=0,length=nodes.length;i++){13 fragment.appendChild(nodes[i].cloneNode(true));14 }15 this.appendChild(fragment);16 //释放17 nodes=null;18 fragment=null;19 20 }
同理也是可以直接修改insertBefore的；把前面的最后的appendChild改为insertBefore;
当然可以传个标识参数来区分;
1 var appendHtmlOp=function(el,html,where){ 2 var div=document.createElement("div"),fragment=document.createDocumentFragment();nodes=null; 3 4 where=where||"bottom"; 5 div.innertHTML=html; 6 nodes=div.childNodes; 7 for(var i=0,length=nodes.length;i<length;i++){ 8 fragement.appendChild(nodes[i].cloneNode(true)); 9 }10 where!=="before"?el.appendChild(fragment):el.insertBefore(fragment,el.firstChild);11 }
这就是文档片段优化法，来减少appendChild多次直接附加在HTML后，使其呈现几何数值增加；
Js中的appenChild,insertBefore--createDocumentFragment
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。