快捷導(dǎo)航

基于jquery的關(guān)于動(dòng)態(tài)創(chuàng)建DOM元素的問(wèn)題

更新時(shí)間：2010年12月24日 15:44:17 作者：

在我們實(shí)際的項(xiàng)目之中，相信有很多的朋友直接使用了以下的格式創(chuàng)建DOM元素。

 
<script type="text/javascript"> 
document.getElementById("testDiv").innerHTML ="動(dòng)態(tài)創(chuàng)建的div"; 
</script> 

而且用的應(yīng)該是還是樂(lè)此不疲，但是有多少人知道這是錯(cuò)誤的做法!錯(cuò)誤的原因:
(1) 在頁(yè)面加載時(shí)改變了頁(yè)面的結(jié)構(gòu). 在IE6中如果網(wǎng)絡(luò)變慢或者頁(yè)面內(nèi)容太大就會(huì)出現(xiàn)"終止操作"的錯(cuò)誤. 也就是說(shuō)"永遠(yuǎn)不要在頁(yè)面加載時(shí)改變頁(yè)面的Dom模型".
(2) 使用修改HTML內(nèi)容添加元素, 不符合Dom標(biāo)準(zhǔn). 在實(shí)際工作中也碰到過(guò)使用這種方法修改內(nèi)容后, 某些瀏覽器中并不能立刻顯示添加的元素, 因?yàn)椴煌瑸g覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創(chuàng)建對(duì)象, 在所有的瀏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個(gè)完整的HTML字符串, 內(nèi)部也是使用innerHTML. 所以也不是完全否定innerHTML函數(shù)的使用.所以從現(xiàn)在開(kāi)始請(qǐng)摒棄這種舊知識(shí), 使用下面介紹的正確方法編程.
關(guān)于使用HTML DOM創(chuàng)建元素本文不做詳細(xì)介紹, 下面舉一個(gè)簡(jiǎn)單的例子:第一種正確方式：

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

 
//使用Dom標(biāo)準(zhǔn)創(chuàng)建元素 
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"; 
var object = testDiv.appendChild(select); 

通過(guò)使用 document.createElement 方法我們可以創(chuàng)建Dom元素, 然后通過(guò)appendChild方法為添加到指定對(duì)象上.
第二種方式：使用Jquery
當(dāng)HTML字符串是沒(méi)有屬性的元素是, 內(nèi)部使用document.createElement創(chuàng)建元素, 比如:

//jQuery內(nèi)部使用document.createElement創(chuàng)建元素:

$("").css("border","solid 1px #FF0000").html("動(dòng)態(tài)創(chuàng)建的div").appendTo(testDiv);
否則使用innerHTML方法創(chuàng)建元素:

//jQuery內(nèi)部使用innerHTML創(chuàng)建元素:

$("動(dòng)態(tài)創(chuàng)建的div").appendTo(testDiv)

您可能感興趣的文章: