轉：http://book.51cto.com/art/201109/294763.htm
1. 錯誤的編程方法
使用JavaScript動態地創建元素時，有很多程序員通過直接更改某一個容器的HTML內容來進行。
例6-2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>動態創建對象</title> </head>
<body>
<div id="testDiv">測試圖層</div>
<script type="text/javascript">
document.getElementById("testDiv").innerHTML =
"<div style=\"border:solid 1px #FF0000\">動態創建的div</div>";
</script>
</body>
</html>
上面的示例中通過修改testDiv的內容，想在頁面上動態地添加一個DIV元素。但是請牢記，這是錯誤的做法！錯誤的原因如下：
在頁面加載時改變了頁面的結構。在IE6中，如果網絡變慢或者頁面內容太大，就會出現"終止操作"的錯誤。也就是說永遠不要在頁面加載時改變頁面的Dom模型。
使用修改HTML內容添加元素，不符合Dom標准，在實際工作中也碰到過使用這種方法修改內容后，某些瀏覽器中並不能立刻顯示添加的元素的情況，因為不同瀏覽器的顯示引擎是不同的。但是如果使用Dom的CreateElement創建對象，在所有的瀏覽器中幾乎都可以。但是在jQuery中，如果傳入的值是一個完整的HTML字符串，那么內部也是使用innerHTML，所以也不是完全否定innerHTML函數的使用。
所以，從現在開始請摒棄這種舊知識，使用下面介紹的正確方法編程。
2. 創建新的元素
在jQuery中創建對象非常簡單，比如創建一個DIV元素：
$("<div style=\"border:solid 1px #FF0000\">動態創建的div</div>")
主要使用jQuery核心類庫中的一個方法：
jQuery( html, ownerDocument )
Returns: jQuery
其中，HTML參數是一個HTML字符串，當HTML字符串是沒有屬性的元素時，內部使用document.createElement創建元素，比如：
//jQuery內部使用document.createElement創建元素:
$("<div/>").css("border","solid 1px #FF0000").html("動態創建的div").appendTo(testDiv);
否則使用innerHTML方法創建元素：
//jQuery內部使用innerHTML創建元素:
$("<div style=\"border:solid 1px #FF0000\">動態創建的div</div>").appendTo(testDiv);
3. 將元素添加到對象上
可以使用上面兩種方式創建一個元素，但是上面已經提到一定不要在頁面加載時就改變頁面的DOM結構，比如添加一個元素。正確的做法是在頁面加載完畢后，添加或刪除元素。傳統做法上，使用window.onload完成上述目的：
//DOM加載完畢后添加元素
//傳統方法
window.onload = function() {
testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">
動態創建的div</div>";
}
雖然能夠在DOM完整加載后，再添加新的元素，但是不幸的是，瀏覽器執行window.onload函數不僅僅是在構建完DOM樹之后，也是在所有圖像和其他外部資源完整地加載並且在瀏覽器窗口顯示完畢之后。所以，如果某個圖片或者其他資源加載很長時間，訪問者就會看到一個不完整的頁面，甚至在圖片加載之前，就執行了需要依賴動態添加的元素的腳本而導致腳本錯誤。
解決辦法就是采用等DOM被解析后，在圖像和外部資源加載之前執行的函數。在jQuery中，這一實現變得可行：
//jQuery 使用動態創建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML =
"<div style=\"border:solid 1px #FF0000\">使用動
態創建的$(document).ready(function)方法</div>"; }
);
或者使用簡便語法:
//jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML +=
"<div style=\"border:solid 1px #FF0000\">
使用$(function)方法</div>"; }
);
使用$()將函數包裝起來即可。而且可以在一個頁面綁定多個函數，如果使用傳統的window.onload則只能調用一個函數。
所以請大家將修改DOM的函數使用此方法調用。另外還要注意document.createElement和innerHTML的區別。如果可以，請盡量使用document.createElement和$("<div/>")的形式創建對象。