| W3CDOM 1: Create all elements as needed | removeTable();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i = 0; i < 20; i++) {
var z = y.appendChild(document.createElement('tr'));
for (var j = 0; j < 20; j++) {
var a = z.appendChild(document.createElement('td'));
a.appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
| ready |
| W3CDOM 2: Create elements once, then clone | removeTable();
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 < 20; i++) {
var z = y.appendChild(tr.cloneNode(true));
for (var j = 0; j < 20; j++) {
var a = z.appendChild(td.cloneNode(true));
a.appendChild(ast.cloneNode(true));
}
}
document.getElementById('writeroot').appendChild(x);
| ready |
| tableMethods | removeTable();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i = 0; i < 20; i++) {
var z = y.insertRow(0);
for (var j = 0; j < 20; j++) {
var a = z.insertCell(0).appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
| ready |
| INNERHTML 1: concatenate one string | removeTable();
var string = '<table><tbody>';
for (var i = 0; i < 20; i++) {
string += '<tr>';
for (var j = 0; j < 20; j++) {
string += '<td>*</td>';
}
string += '</tr>';
}
string += '</tbody></table>';
document.getElementById('writeroot').innerHTML = string;
| ready |
| INNERHTML 2: push and join | removeTable();
var string = new Array();
string.push('<table><tbody>');
for (var i = 0; i < 20; i++) {
string.push('<tr>');
for (var j = 0; j < 20; j++) {
string.push('<td>*</td>');
}
string.push('</tr>');
}
string.push('</tbody></table>');
var writestring = string.join('');
document.getElementById('writeroot').innerHTML = writestring;
| ready |
| INNERHTML 2 + W3CDOM | removeTable();
var string = new Array();
string.push('<table><tbody>');
for (var i = 0; i < 20; i++) {
string.push('<tr>');
for (var j = 0; j < 20; j++) {
string.push('<td>*</td>');
}
string.push('</tr>');
}
string.push('</tbody></table>');
var writestring = string.join('');
var x = document.createElement('div');
x.innerHTML = writestring;
document.getElementById('writeroot').appendChild(x.firstChild);
| ready |