例子：我們要實現的效果是當用戶點擊鼠標的時候，就在舊數據上追加若干新數據。

如果使用標準DOM的話，完整代碼如下：

test

data

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

}

};

注：一旦結構比較復雜的話，標準DOM需要編寫冗長的代碼。

如果使用innerHTML的話，部分代碼如下：

document.onmousedown = function() {

var html = "";

for (var i = 0; i < 10; i++) {

html += "

" + Math.random() + "

";

}

document.getElementsByTagName('div')[0].innerHTML += html;

};

注：innerHTML沒有標準DOM中的appendChild，所以使用了『+=』的方式，效率低下。

我們可以結合使用innerHTML和標準DOM，這樣二者的優點就兼得了，部分代碼如下：

document.onmousedown = function() {

var html = "";

for (var i = 0; i < 10; i++) {

html += "

" + Math.random() + "

";

}

var temp = document.createElement("div");

temp.innerHTML = html;

while (temp.firstChild) {

document.getElementsByTagName('div')[0].appendChild(temp.firstChild);

}

};

注：創建一個元素，然后注入innerHTML，接著在元素上使用標準DOM操作。

還不算完，Asynchronous innerHTML給出了更強悍的解決方法，部分代碼如下：

document.onmousedown = function() {

var html = "";

for (var i = 0; i < 10; i++) {

html += "

" + Math.random() + "

";

}

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

}

})();

};

注：使用setTimeout防止堵塞瀏覽器，使用DocumentFragment減少渲染次數。

另：代碼在拼接字符串時還可以更快，詳見：Fastest way to build an HTML string。

總結

以上是生活随笔為你收集整理的编写HTML提高编写代码的效率,优化innerHTML操作(提高代码执行效率)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。