使用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);
//....
}
//...
}