jquery 動態建立元素的方式介紹及應用

一般動態建立元素可以通過兩種方式
1、Dom HTml 複製代碼 代碼如下:var select = document.createElement("select");
select.options[0] = new Option("附加元件1", "value1");
select.options[1] = new Option("附加元件2", "value2");
select.size = "2";
testDiv.appendChild(select);
});

通過document的createElement方法建立，然後通過appendChild方法添加到指定的對象中即可

2、JQuery函數建立
$("<div style=\"border:solid 1px #FF0000\">動態建立的div</div>")
通過append，appendto，prepend，prependto等方法添加到指定的對象中，具體可以查看
http://www.jb51.net/article/35845.htm

3、頁面載入的時候最好在頁面載入完後執行建立
可以使用window.onload,但是在添加新的元素, 但是不幸的是瀏覽器執行window.onload函數不僅僅是在構建完DOM樹之後, 也是在所有映像和其他外部資源完整的載入並且在瀏覽器視窗顯示完畢之後. 所以如果某個圖片或者其他資源載入很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片載入之前就執行了需要依賴動態添加的元素的指令碼而導致指令碼錯誤.

解決辦法就是等DOM被解析後, 在映像和外部資源載入之前執行我們的函數.在jQuery中讓這一實現變得可行 複製代碼 代碼如下:$(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/>")的形式建立對象.