例子：我們要實現的效果是當用戶點擊鼠標的時候，就在舊數據上追加若干新數據。
如果使用標准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減少渲染次數。
另：代碼在拼接字符串時還可以更快，詳見：Fastest way to build an HTML string。