快捷導(dǎo)航

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

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

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

一般動(dòng)態(tài)創(chuàng)建元素可以通過兩種方式
1、Dom HTml

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

 
var select = document.createElement("select"); 
select.options[0] = new Option("加載項(xiàng)1", "value1"); 
select.options[1] = new Option("加載項(xiàng)2", "value2"); 
select.size = "2"; 
testDiv.appendChild(select); 
}); 

通過document的createElement方法創(chuàng)建，然后通過appendChild方法添加到指定的對(duì)象中即可

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

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

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

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

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

或者使用簡(jiǎn)便語(yǔ)法:

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

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

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

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

您可能感興趣的文章: