使用createDocumentFragment不要使用innerHTML

借助createDocumentFragment创建的table效果：

代码片段1：

<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>案件资料</legend>
    		<table border=1 cellPadding=0 cellSpacing=0 style="margin:5px;width:840px;">
    			<tr><th width="40px" style="text-align:center;">序号</th><th width="480px" style="text-align:center;">名称</th><th width="90px"  style="text-align:center;">分类</th><th width="160px"  style="text-align:center;">上传时间</th><th width="70px"  style="text-align:center;">&#160;</th></tr>
    			<tbody id="case_files">
    			</tbody>    			
    		</table>
    	</fieldset>

 

 

代码片段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还可以防止页面闪屏的问题。