w3cdom1:創建所有需要的元件
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i=0;i<50;i++)
{
var z = y.appendChild(document.createElement('tr'));
for (var j=0;j<50;j++)
{
var a = z.appendChild(document.createElement('td'));
a.appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
w3cdom2：只在第一次的時候創建，以后再需要就clone
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
var tr = document.createElement('tr');
var td = document.createElement('td');
var ast = document.createTextNode('*');
for (var i=0;i<50;i++)
{
var z = y.appendChild(tr.cloneNode(true));
for (var j=0;j<50;j++)
{
var a = z.appendChild(td.cloneNode(true));
a.appendChild(ast.cloneNode(true));
}
}
document.getElementById('writeroot').appendChild(x);
tableMethods: 使用W3C DOM的表格方法
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i=0;i<50;i++)
{
var z = y.insertRow(0);
for (var j=0;j<50;j++)
{
var a = z.insertCell(0).appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
innerHTML1: 把一串字符串連接起來
var string = '<table><tbody>';
for (var i=0;i<50;i++)
{
string += '<tr>';
for (var j=0;j<50;j++)
{
string += '<td>*</td>';
}
string += '</tr>';
}
string += '</tbody></table>';
document.getElementById('writeroot').innerHTML = string;
innerHTML2: 把字符串push到數組里，再把數組串成一個字符串
var string = new Array();
string.push('<table><tbody>');
for (var i=0;i<50;i++)
{
string.push('<tr>');
for (var j=0;j<50;j++)
{
string.push('<td>*</td>');
}
string.push('</tr>');
}
string.push('</tbody></table>');
var writestring = string.join('');
document.getElementById('writeroot').innerHTML = writestring;
從原文網站上的數據來看，最后一種方法是最快的，前兩種w3c的東東在IE/Win里不是一般的慢的。不過最快的方法在IE5/Win和IE5.x/Mac里不支持，需要一個
quirksmode.js來讓它間接的支持。
看了原文，除了了解這些方法的速度外，還了解了這幾種不同的方法，算是一點點收獲吧。
PS：innerHTML不是標準，不過好像目前的瀏覽器都支持的說。