jquery 動態建立元素的方式介紹及應用_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

")
透過append，appendto，prepend，prependto等方法加入指定的物件中，具體可以查看 
http://www.jb51.net/article/ 35845.htm

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

解決辦法就是等DOM被解析後, 在圖像和外部資源載入之前執行我們的函數.在jQuery中讓這一實現變得可行

複製程式碼 程式碼如下:

$(document).ready(
function() { testDiv.innerHTML = "

使用動態建立的$(document).ready(function)方法

"; }
);

或者使用簡便語法:

複製代碼 程式碼如下:

//jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML = "

使用$(function)方法

"; }
);

使用$()將我們的函數包裝起來即可. 而且可以在一個頁面綁定多個函數, 如果使用傳統的window.onload則只能呼叫一個函數.

所以請大家將修改DOM的函數使用此方法調用. 另外還要注意document.createElement和innerHTML的區別.如果可以請盡量使用document.createElement和$("

")的形式建立物件.