innerHTML：
1 function tableInnerHTML() { 2 var i, h = ['<table border="1" width="100%">']; 3 h.push('<thead>'); 4 h.push('<tr><th>id<\/th><th>yes?<\/th><th>name<\/th><th>url<\/th><th>action<\/th><\/tr>'); 5 h.push('<\/thead>'); 6 h.push('<tbody>'); 7 for (i = 1; i <= 1000; i++) { 8 h.push('<tr><td>'); 9 h.push(i); 10 h.push('<\/td><td>'); 11 h.push('And the answer is... ' + (i % 2 ? 'yes' : 'no')); 12 h.push('<\/td><td>'); 13 h.push('my name is #' + i); 14 h.push('<\/td><td>'); 15 h.push('<a href="http://example.org/' + i + '.html">http://example.org/' + i + '.html<\/a>'); 16 h.push('<\/td><td>'); 17 h.push('<ul>'); 18 h.push('<li><a href="edit.php?id=' + i + '">edit<\/a><\/li>'); 19 h.push('<li><a href="delete.php?id="' + i + '-id001">delete<\/a><\/li>'); 20 h.push('<\/ul>'); 21 h.push('<\/td>'); 22 h.push('<\/tr>'); 23 } 24 h.push('<\/tbody>'); 25 h.push('<\/table>'); 26 27 document.getElementById('here').innerHTML = h.join(''); 28 }
DOM方法：
1 function tableDOM() { 2 var i, table, thead, tbody, tr, th, td, a, ul, li; 3 tbody = document.createElement('tbody'); 4 for (i = 1; i <= 1000; i++) { 5 tr = document.createElement('tr'); 6 td = document.createElement('td'); 7 td.appendChild(document.createTextNode((i % 2) ? 'yes' : 'no')); 8 tr.appendChild(td); 9 td = document.createElement('td'); 10 td.appendChild(document.createTextNode(i)); 11 tr.appendChild(td); 12 td = document.createElement('td'); 13 td.appendChild(document.createTextNode('my name is #' + i)); 14 tr.appendChild(td); 15 16 a = document.createElement('a'); 17 a.setAttribute('href', 'http://example.org/' + i + '.html'); 18 a.appendChild(document.createTextNode('http://example.org/' + i + '.html')); 19 td = document.createElement('td'); 20 td.appendChild(a); 21 tr.appendChild(td); 22 23 ul = document.createElement('ul'); 24 a = document.createElement('a'); 25 a.setAttribute('href', 'edit.php?id=' + i); 26 a.appendChild(document.createTextNode('edit')); 27 li = document.createElement('li'); 28 li.appendChild(a); 29 ul.appendChild(li); 30 a = document.createElement('a'); 31 a.setAttribute('href', 'delete.php?id=' + i); 32 a.appendChild(document.createTextNode('delete')); 33 li = document.createElement('li'); 34 li.appendChild(a); 35 ul.appendChild(li); 36 td = document.createElement('td'); 37 td.appendChild(ul); 38 tr.appendChild(td); 39 40 tbody.appendChild(tr); 41 } 42 43 tr = document.createElement('tr'); 44 th = document.createElement('th'); 45 th.appendChild(document.createTextNode('yes?')); 46 tr.appendChild(th); 47 th = document.createElement('th'); 48 th.appendChild(document.createTextNode('id')); 49 tr.appendChild(th); 50 th = document.createElement('th'); 51 th.appendChild(document.createTextNode('name')); 52 tr.appendChild(th); 53 th = document.createElement('th'); 54 th.appendChild(document.createTextNode('url')); 55 tr.appendChild(th); 56 th = document.createElement('th'); 57 th.appendChild(document.createTextNode('action')); 58 tr.appendChild(th); 59 60 thead = document.createElement('thead'); 61 thead.appendChild(tr); 62 table = document.createElement('table'); 63 table.setAttribute('border', 1); 64 table.setAttribute('width', '100%'); 65 table.appendChild(thead); 66 table.appendChild(tbody); 67 68 document.getElementById('here').appendChild(table); 69 }
速度明显innerHTML比DOM方法要快很多（包括撸代码的速度）,但是在webkit内核的浏览器中DOM方法比innerHTML要快。