使用createDocumentFragment不要使用innerHTML

本文介绍了一种使用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还可以防止页面闪屏的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值