innerHTML比較DOMメソッド
12058 ワード
innerHTML:
DOMメソッド:
速度は明らかにinnerHTMLがDOMメソッドよりずっと速い(コードを引っ張る速度を含む)が、webkitカーネルのブラウザではinnerHTMLよりもDOMメソッドが速い.
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カーネルのブラウザではinnerHTMLよりもDOMメソッドが速い.