小熊泡泡

          導航

          <2013年5月>
          2829301234
          567891011
          12131415161718
          19202122232425
          2627282930311
          2345678

          留言簿(4)

          文章分類

          隨筆檔案

          文章檔案

          閱讀排行榜

          評論排行榜

          常用鏈接

          統計

          最新評論

          w3cDOM vs innerHTML (轉載)

          w3cdom1:創建所有需要的元件

          var x = document.createElement('table');
          var y = x.appendChild(document.createElement('tbody'));
          for (var i=0;i<50;i++)
          {
          var z = y.appendChild(document.createElement('tr'));
          for (var j=0;j<50;j++)
          {
          var a = z.appendChild(document.createElement('td'));
          a.appendChild(document.createTextNode('*'));
          }
          }
          document.getElementById('writeroot').appendChild(x);
          



          w3cdom2:只在第一次的時候創建,以后再需要就clone
          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<50;i++)
          {
          var z = y.appendChild(tr.cloneNode(true));
          for (var j=0;j<50;j++)
          {
          var a = z.appendChild(td.cloneNode(true));
          a.appendChild(ast.cloneNode(true));
          }
          }
          document.getElementById('writeroot').appendChild(x);
          



          tableMethods: 使用W3C DOM的表格方法
          var x = document.createElement('table');
          var y = x.appendChild(document.createElement('tbody'));
          for (var i=0;i<50;i++)
          {
          var z = y.insertRow(0);
          for (var j=0;j<50;j++)
          {
          var a = z.insertCell(0).appendChild(document.createTextNode('*'));
          }
          }
          document.getElementById('writeroot').appendChild(x);
          



          innerHTML1: 把一串字符串連接起來
          var string = '<table><tbody>';
          for (var i=0;i<50;i++)
          {
          string += '<tr>';
          for (var j=0;j<50;j++)
          {
          string += '<td>*</td>';
          }
          string += '</tr>';
          }
          string += '</tbody></table>';
          document.getElementById('writeroot').innerHTML = string;
          



          innerHTML2: 把字符串push到數組里,再把數組串成一個字符串
          var string = new Array();
          string.push('<table><tbody>');
          for (var i=0;i<50;i++)
          {
          string.push('<tr>');
          for (var j=0;j<50;j++)
          {
          string.push('<td>*</td>');
          }
          string.push('</tr>');
          }
          string.push('</tbody></table>');
          var writestring = string.join('');
          document.getElementById('writeroot').innerHTML = writestring;
          



          從原文網站上的數據來看,最后一種方法是最快的,前兩種w3c的東東在IE/Win里不是一般的慢的。不過最快的方法在IE5/Win和IE5.x/Mac里不支持,需要一個quirksmode.js來讓它間接的支持。
          看了原文,除了了解這些方法的速度外,還了解了這幾種不同的方法,算是一點點收獲吧。


          PS:innerHTML不是標準,不過好像目前的瀏覽器都支持的說。

          posted on 2006-07-08 22:32 小熊泡泡 閱讀(354) 評論(1)  編輯  收藏 所屬分類: Javascript

          評論

          # re: w3cDOM vs innerHTML (轉載) 2013-05-07 13:48 薩提亞

          謝謝啦,嗯嗯  回復  更多評論   

          主站蜘蛛池模板: 泽普县| 甘肃省| 长泰县| 都安| 多伦县| 两当县| 仪陇县| 化州市| 桐柏县| 桦甸市| 淮滨县| 中宁县| 徐汇区| 梅河口市| 沙坪坝区| 沁阳市| 鄄城县| 炎陵县| 监利县| 泗洪县| 环江| 遂宁市| 汨罗市| 凉城县| 温泉县| 区。| 澄江县| 启东市| 尼玛县| 无为县| 沿河| 定日县| 塔河县| 朝阳市| 怀化市| 岳普湖县| 石楼县| 徐州市| 新河县| 闵行区| 丰县|