基于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元素。
復(fù)制代碼 代碼如下:
<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)
您可能感興趣的文章:
- jQuery中dom元素上綁定的事件詳解
- jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
- jQuery創(chuàng)建DOM元素實(shí)例解析
- jQuery 獲取/設(shè)置/刪除DOM元素的屬性以a元素為例
- jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
- jQuery 刪除/替換DOM元素的幾種方式
- jquery選擇器排除某個(gè)DOM元素的方法(實(shí)例演示)
- JQuery為頁(yè)面Dom元素綁定事件及解除綁定方法
- js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
- 讀jQuery之五(取DOM元素)
- 基于Jquery的動(dòng)態(tài)創(chuàng)建DOM元素的代碼
- jQuery 創(chuàng)建Dom元素
- jQuery添加刪除DOM元素方法詳解
相關(guān)文章
jquery插件之easing 動(dòng)態(tài)菜單
jQuery Easing Plugin 是一個(gè)簡(jiǎn)單的為對(duì)象擴(kuò)展高級(jí)屬性和選項(xiàng)的jQuery插件。2010-08-08
最新最熱最實(shí)用的15個(gè)jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件,都有著非常炫酷的效果,十分的實(shí)用,這里推薦給大家。2015-07-07
jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解
在項(xiàng)目需求中有這樣一功能:在頁(yè)面彈出一個(gè)form表單,ajax無(wú)刷新提交表單,表單需通過(guò)驗(yàn)證。下面小編給大家介紹通過(guò)jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解,需要的朋友參考下吧2016-04-04
Web 前端設(shè)計(jì)模式--Dom重構(gòu) 提高顯示性能
首頁(yè)那邊有一個(gè)產(chǎn)品瀏覽的版塊在延遲載入的時(shí)候,將我所有的隱藏幀的項(xiàng)都顯示出來(lái),因?yàn)槁龑?dǎo)致頁(yè)面變形。2010-10-10
jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法
今天小編就為大家分享一篇jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示
近期有項(xiàng)目需求是這樣的,需要根據(jù)用戶選擇的選項(xiàng)給出相應(yīng)的提示,本文給大家介紹基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示,對(duì)jquery復(fù)選框是否選中相關(guān)知識(shí)感興趣的朋友一起看看吧2015-12-12
jquery的Theme和Theme Switcher使用小結(jié)
jquery的Theme和Theme Switcher使用總結(jié),學(xué)習(xí)jquery Theme的朋友可以參考下。2010-09-09
jQuery實(shí)現(xiàn)的簡(jiǎn)單前端搜索功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單前端搜索功能,涉及jQuery事件響應(yīng)與頁(yè)面元素遍歷、匹配、動(dòng)態(tài)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10

