施用createDocumentFragment不要使用innerHTML

使用createDocumentFragment不要使用innerHTML

借助createDocumentFragment创建的table效果：

代码片段1：

?
?
代码片段2：
var documentFragment = document.createDocumentFragment();for(var j=0,len=o.resultList.length;j<len;j++){var d = o.resultList[j];var tr = document.createElement('tr');var td1 = document.createElement('td');var txt1 = document.createTextNode((j+1));td1.width = "40px";td1.style.textAlign = 'center'; var td2 = document.createElement('td');var txt2 = document.createTextNode(d['DOWNLOAD_FILE_NAME']);td2.width = "480px";var td3 = document.createElement('td');var txt3 = document.createTextNode(d['TITLE']);td3.width = "90px";td3.style.textAlign = 'center'; var td4 = document.createElement('td');var txt4 = document.createTextNode(d['CREATE_TIME']);td4.width = "160px";td4.style.textAlign = 'center'; var td5 = document.createElement('td');td5.width = "70px";td5.style.textAlign = 'center';var link = document.createElement('a');link.href = Spider.getAppName()+'/file/storage/download.json?fileId='+d['FILE_ID']+'&isOnLine=no';var txt5 = document.createTextNode('下载');link.appendChild(txt5);td1.appendChild(txt1);td2.appendChild(txt2);td3.appendChild(txt3);td4.appendChild(txt4);td5.appendChild(link);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);documentFragment.appendChild(tr);}document.getElementById("case_files").appendChild(documentFragment);
?
在使用过程中曾经试过用innerHTML = "<tr><td>test</td></tr>......";发现有时候存在浏览器兼容问题和效率问题。
借助createDocumentFragment还可以防止页面闪屏的问题。