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

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

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

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

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

復制代碼代碼如下:

 
//使用Dom標準創(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
當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)

您可能感興趣的文章:

相關(guān)文章

jquery插件之easing 動態(tài)菜單
jQuery Easing Plugin 是一個簡單的為對象擴展高級屬性和選項的jQuery插件。
2010-08-08
最新最熱最實用的15個jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實用的15款jQuery插件，都有著非常炫酷的效果，十分的實用，這里推薦給大家。
2015-07-07
jQuery向父輩遍歷的簡單方法
下面小編就為大家?guī)硪黄猨Query向父輩遍歷的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解
在項目需求中有這樣一功能：在頁面彈出一個form表單，ajax無刷新提交表單，表單需通過驗證。下面小編給大家介紹通過jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解，需要的朋友參考下吧
2016-04-04
Web 前端設計模式--Dom重構(gòu) 提高顯示性能
首頁那邊有一個產(chǎn)品瀏覽的版塊在延遲載入的時候，將我所有的隱藏幀的項都顯示出來，因為慢導致頁面變形。
2010-10-10
jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法
今天小編就為大家分享一篇jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
基于jQuery實現(xiàn)復選框是否選中進行答題提示
近期有項目需求是這樣的，需要根據(jù)用戶選擇的選項給出相應的提示，本文給大家介紹基于jQuery實現(xiàn)復選框是否選中進行答題提示，對jquery復選框是否選中相關(guān)知識感興趣的朋友一起看看吧
2015-12-12
jquery的Theme和Theme Switcher使用小結(jié)
jquery的Theme和Theme Switcher使用總結(jié)，學習jquery Theme的朋友可以參考下。
2010-09-09
jQuery實現(xiàn)的簡單前端搜索功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單前端搜索功能,涉及jQuery事件響應與頁面元素遍歷、匹配、動態(tài)設置等相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
jquery統(tǒng)計復選框選中示例
在jquery中如果我們要獲取選中的checkbox我們可以input:checked,然后獲取選中checkbox個數(shù)量時我們可以使用jQuery的size()方法或length屬性來判斷就行了
2013-11-11