使用createDocumentFragment不要使用innerHTML

最新推荐文章于 2023-10-17 11:22:32 发布

原创最新推荐文章于 2023-10-17 11:22:32 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用createDocumentFragment方法优化HTML表格元素动态加载的技术，通过实例代码展示了如何构建表格行并附加到文档片段，再将其一次性插入DOM树中，以此提高渲染效率并避免页面闪烁问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

借助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还可以防止页面闪屏的问题。