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