innerHTML对比DOM方法

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要快。

posted @ 2012-06-20 15:12  小猩猩君  阅读(1436)  评论(0编辑  收藏  举报