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