首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议111:克隆节点比创建节点更好

关灯直达底部

使用DOM方法更新页面内容的另一个途径是克隆已有DOM元素,而不是创建新的元素,也就是使用element.cloneNode(element是一个已存在的节点)代替document.createElement。

在大多数浏览器上,克隆节点更有效率,但提高得不太多。用克隆节点的办法创建1000行表格,只创建一次单元格,然后重复执行复制操作,这样会快一些。使用element.cloneNode创建表格的代码如下:


function tableClonedDOM{

var i,table,thead,tbody,tr,th,td,a,ul,li,oth=document.createElement('th'),otd=document.createElement('td'),otr=document.createElement('tr'),oa=document.createElement('a'),oli=document.createElement('li'),oul=document.createElement('ul');

tbody=document.createElement('tbody');

for(i=1;i<=1000;i++){

tr=otr.cloneNode(false);

td=otd.cloneNode(false);

td.appendChild(document.createTextNode((i%2)?'yes':'no'));

tr.appendChild(td);

td=otd.cloneNode(false);

td.appendChild(document.createTextNode(i));

tr.appendChild(td);

td=otd.cloneNode(false);

td.appendChild(document.createTextNode('my name is#'+i));

tr.appendChild(td);

//....

}

//...

}