zoukankan      html  css  js  c++  java
  • Javascript innerhtml

    var count = 1; 
    function addCombBox(){ 
       var tbody = document.getElementById("mark"); 
       tr = tbody.insertRow(1); 
       tr.insertCell(0).innerHTML = " "; 
       td = tr.insertCell(1); 
       td.innerHTML = '<input type="button" value="削除" onclick="javascript:deleteCombBox(this)">'; 
       td.innerHTML += '<select name="myList["'+count+'"].userName" size="1"><option value="aa">aa</option><option value="bb">bb</option><option value="cc">cc</option></select> '; 
       count++; 
    } 
    function deleteCombBox(tr){ 
       tr.parentElement.parentElement.removeNode(true); 
    }

    多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。

      例子:我们要实现的效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据。

      如果使用标准DOM的话,完整代码如下:

    <html>  
    <head>  
    <title>test</title>  
    </head>  
    <body>  
      <div>  
        <p>data<p>  
      </div>  
     
      <script>  
        document.onmousedown = function() {  
            for (var i = 0; i < 10; i++) {  
                var p = document.createElement("p");  
                p.appendChild(document.createTextNode(Math.random()));  
                document.getElementsByTagName('div')[0].appendChild(p);  
            }  
        };  
    </script>  
    </body>  
    </html> 

      注:一旦结构比较复杂的话,标准DOM需要编写冗长的代码。

      如果使用innerHTML的话,部分代码如下:

    <script>  
      document.onmousedown = function() {  
          var html = "";  
          for (var i = 0; i < 10; i++) {  
              html += "<p>" + Math.random() + "<p>";  
          }  
          document.getElementsByTagName('div')[0].innerHTML += html;  
      };  
    </script> 

      注:innerHTML没有标准DOM中的appendChild,所以使用了『+=』的方式,效率低下。

      我们可以结合使用innerHTML和标准DOM,这样二者的优点就兼得了,部分代码如下:

    <script>  
      document.onmousedown = function() {  
          var html = "";  
          for (var i = 0; i < 10; i++) {  
              html += "<p>" + Math.random() + "<p>";  
          }  
          var temp = document.createElement("div");  
          temp.innerHTML = html;  
          while (temp.firstChild) {  
              document.getElementsByTagName('div')[0].appendChild(temp.firstChild);  
          }  
      };  
    </script> 

      注:创建一个元素,然后注入innerHTML,接着在元素上使用标准DOM操作。

      还不算完,Asynchronous innerHTML给出了更强悍的解决方法,部分代码如下:

    <script>  
      document.onmousedown = function() {  
          var html = "";  
          for (var i = 0; i < 10; i++) {  
              html += "<p>" + Math.random() + "<p>";  
          }  
          var temp = document.createElement('div');  
          temp.innerHTML = html;  
          var frag = document.createDocumentFragment();  
          (function() {  
              if (temp.firstChild) {  
                  frag.appendChild(temp.firstChild);  
                  setTimeout(arguments.callee, 0);  
              } else {  
                  document.getElementsByTagName('div')[0].appendChild(frag);  
              }  
          })();  
      };  
    </script> 

      注:使用setTimeout防止堵塞浏览器,使用DocumentFragment减少渲染次数

  • 相关阅读:
    设计模式:解释器模式???
    设计模式:访问者模式(Visitor)
    设计模式:享元模式(Flyweight)
    NHibernate
    设计模式:中介者模式(Mediator)
    设计模式:职责链模式(Chain Of Responsibility)
    反射
    设计模式:命令模式(Command)
    设计模式:桥连模式(Bridge)
    设计模式:组合模式(Composite)
  • 原文地址:https://www.cnblogs.com/mingforyou/p/2704585.html
Copyright © 2011-2022 走看看