DOM操作 vs. innerHTML

1. innerHTML创建效率高,DOM操作删除快
2. 文档加载没完成,就不能改变DOM结构

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);      
   }      })();  }; 

function replaceHtml(el, html) { 

02     var oldEl = typeof el === "string" ? document.getElementById(el) : el; 

03     /*@cc_on // 单纯innerHTML在IE中会稍微更快一些 

04         oldEl.innerHTML = html; 

05         return oldEl; 

06     @*/

07     var newEl = oldEl.cloneNode(false); 

08     newEl.innerHTML = html; 

09     oldEl.parentNode.replaceChild(newEl, oldEl); 

10     /* 因为我们只是从DOM中移除旧元素，所以返回一个新元素引用用作恢复 */

11     return newEl; 

12 };

转载于:https://www.cnblogs.com/itfriend/archive/2012/06/08/2542552.html