基于jquery的關(guān)于動態(tài)創(chuàng)建DOM元素的問題
更新時間:2010年12月24日 15:44:17 作者:
在我們實際的項目之中,相信有很多的朋友直接使用了以下的格式創(chuàng)建DOM元素。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
document.getElementById("testDiv").innerHTML ="動態(tài)創(chuàng)建的div";
</script>
而且用的應(yīng)該是還是樂此不疲,但是有多少人知道這是錯誤的做法!錯誤的原因:
(1) 在頁面加載時改變了頁面的結(jié)構(gòu). 在IE6中如果網(wǎng)絡(luò)變慢或者頁面內(nèi)容太大就會出現(xiàn)"終止操作"的錯誤. 也就是說"永遠(yuǎn)不要在頁面加載時改變頁面的Dom模型".
(2) 使用修改HTML內(nèi)容添加元素, 不符合Dom標(biāo)準(zhǔn). 在實際工作中也碰到過使用這種方法修改內(nèi)容后, 某些瀏覽器中并不能立刻顯示添加的元素, 因為不同瀏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創(chuàng)建對象, 在所有的瀏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字符串, 內(nèi)部也是使用innerHTML. 所以也不是完全否定innerHTML函數(shù)的使用.所以從現(xiàn)在開始請摒棄這種舊知識, 使用下面介紹的正確方法編程.
關(guān)于使用HTML DOM創(chuàng)建元素本文不做詳細(xì)介紹, 下面舉一個簡單的例子:第一種正確方式:
復(fù)制代碼 代碼如下:
//使用Dom標(biāo)準(zhǔn)創(chuàng)建元素
var select = document.createElement("select");
select.options[0] = new Option("加載項1", "value1");
select.options[1] = new Option("加載項2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
通過使用 document.createElement 方法我們可以創(chuàng)建Dom元素, 然后通過appendChild方法為添加到指定對象上.
第二種方式: 使用Jquery
當(dāng)HTML字符串是沒有屬性的元素是, 內(nèi)部使用document.createElement創(chuàng)建元素, 比如:
//jQuery內(nèi)部使用document.createElement創(chuàng)建元素:
$("").css("border","solid 1px #FF0000").html("動態(tài)創(chuàng)建的div").appendTo(testDiv);
否則使用innerHTML方法創(chuàng)建元素:
//jQuery內(nèi)部使用innerHTML創(chuàng)建元素:
$("動態(tài)創(chuàng)建的div").appendTo(testDiv)
您可能感興趣的文章:
- jQuery中dom元素上綁定的事件詳解
- jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
- jQuery創(chuàng)建DOM元素實例解析
- jQuery 獲取/設(shè)置/刪除DOM元素的屬性以a元素為例
- jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
- jQuery 刪除/替換DOM元素的幾種方式
- jquery選擇器排除某個DOM元素的方法(實例演示)
- JQuery為頁面Dom元素綁定事件及解除綁定方法
- js/jQuery對象互轉(zhuǎn)(快速操作dom元素)
- 讀jQuery之五(取DOM元素)
- 基于Jquery的動態(tài)創(chuàng)建DOM元素的代碼
- jQuery 創(chuàng)建Dom元素
- jQuery添加刪除DOM元素方法詳解
相關(guān)文章
jquery幻燈片插件bxslider樣式改進(jìn)實例
這篇文章主要介紹了jquery幻燈片插件bxslider樣式改進(jìn),對比官方樣式以實例形式講述了改進(jìn)的技巧,非常實用,需要的朋友可以參考下2014-10-10Easyui在treegrid添加控件的實現(xiàn)方法
這篇文章主要介紹了Easyui在treegrid添加控件的實現(xiàn)方法,需要的朋友可以參考下2017-06-06幾種二級聯(lián)動案例(jQuery\Array\Ajax php)
這篇文章主要為大家詳細(xì)介紹了幾種二級聯(lián)動案例(jQuery\Array\Ajax php),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08javascript與jquery中跳出循環(huán)的區(qū)別總結(jié)
本文是對javascript與jquery中跳出循環(huán)的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JQuery插件Quicksand實現(xiàn)超炫的動畫洗牌效果
Quicksand這是一個非常不錯的 jQuery 插件,用于實現(xiàn)動畫洗牌效果,十分的實用,有需要的小伙伴可以參考下。2015-05-05