快捷導(dǎo)航

jquery 動態(tài)創(chuàng)建元素的方式介紹及應(yīng)用

更新時間：2013年04月21日 16:05:01 作者：

動態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁面加載的時候最好在頁面加載完后執(zhí)行創(chuàng)建，感興趣的朋友可以了解下

一般動態(tài)創(chuàng)建元素可以通過兩種方式
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方法創(chuàng)建，然后通過appendChild方法添加到指定的對象中即可

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

3、頁面加載的時候最好在頁面加載完后執(zhí)行創(chuàng)建
可以使用window.onload,但是在添加新的元素, 但是不幸的是瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后. 所以如果某個圖片或者其他資源加載很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執(zhí)行了需要依賴動態(tài)添加的元素的腳本而導(dǎo)致腳本錯誤.

解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實現(xiàn)變得可行

復(fù)制代碼代碼如下:

 
$(document).ready( 
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動態(tài)創(chuàng)建的$(document).ready(function)方法</div>"; } 
); 

或者使用簡便語法:

復(fù)制代碼代碼如下:

 
//jQuery 使用$(function)方法 
$( 
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; } 
); 

使用$()將我們的函數(shù)包裝起來即可. 而且可以在一個頁面綁定多個函數(shù), 如果使用傳統(tǒng)的window.onload則只能調(diào)用一個函數(shù).

所以請大家將修改DOM的函數(shù)使用此方法調(diào)用. 另外還要注意document.createElement和innerHTML的區(qū)別. 如果可以請盡量使用document.createElement和$("<div/>")的形式創(chuàng)建對象.

您可能感興趣的文章: