讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議111:克隆節點比創建節點更好 >

建議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);

//....

}

//...

}