jQuery創(chuàng)建DOM元素實(shí)例解析
更新時(shí)間：2015年01月19日 10:55:59 投稿：shichen2014
這篇文章主要介紹了jQuery創(chuàng)建DOM元素的方法,實(shí)例分析了jQuery使用$直接創(chuàng)建DOM元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery創(chuàng)建DOM元素的使用技巧。分享給大家供大家參考。具體分析如下：
利用DOM方法創(chuàng)建元素節(jié)點(diǎn)，通常要將document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻煩。
而jQuery使用$就可以直接創(chuàng)建DOM元素
復(fù)制代碼 代碼如下:
var oNewP = $("<p>使用jQuery創(chuàng)建的內(nèi)容</p>");
以上代碼等同于javascript
復(fù)制代碼 代碼如下:
var oNewP2 = document.createElement("p");
var oText = document.createTextNode("這是使用javascript方法創(chuàng)建的內(nèi)容");
oNewP2.appendChild(oText);
var oText = document.createTextNode("這是使用javascript方法創(chuàng)建的內(nèi)容");
oNewP2.appendChild(oText);
例：使用jQuery創(chuàng)建DOM
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function(){
var oNewP = $("<p>使用jQuery創(chuàng)建的內(nèi)容</p>");
oNewP.insertAfter("#display"); //insertAfter方法
})
$(function(){
var oNewP = $("<p>使用jQuery創(chuàng)建的內(nèi)容</p>");
oNewP.insertAfter("#display"); //insertAfter方法
})
</script>
<div id="display"></div>
使用jQuery大大縮短了代碼長(zhǎng)度。節(jié)省了編寫(xiě)時(shí)間。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery中dom元素上綁定的事件詳解
- jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
- 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的關(guān)于動(dòng)態(tài)創(chuàng)建DOM元素的問(wèn)題
- jQuery 創(chuàng)建Dom元素
- jQuery添加刪除DOM元素方法詳解
相關(guān)文章
這篇文章主要介紹了jquery清空表單數(shù)據(jù)的示例,需要的朋友可以參考下2014-02-02
jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加與刪除相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-08-08
jquery實(shí)現(xiàn)手機(jī)號(hào)碼選號(hào)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)手機(jī)號(hào)碼選號(hào)的方法,涉及jquery針對(duì)手機(jī)號(hào)碼的分析與篩選技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jquery通過(guò)ajax加載一段文本內(nèi)容的方法
這篇文章主要介紹了jquery通過(guò)ajax加載一段文本內(nèi)容的方法,是jQuery針對(duì)Ajax的靈活應(yīng)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別
jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別介紹，需要的朋友可以參考下2012-07-07
jquery插件開(kāi)發(fā)注意事項(xiàng)小結(jié)
Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)2013-06-06
jQuery Ajax提交表單查詢獲得數(shù)據(jù)實(shí)例代碼
用戶輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶是否輸入表單，點(diǎn)擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)2012-09-09
在jQuery中使用$而避免跟其它庫(kù)產(chǎn)生沖突的方法
這篇文章主要介紹了在jQuery中使用$而避免跟其它庫(kù)產(chǎn)生沖突的方法,總共羅列了三種,需要的朋友可以參考下2015-08-08
jquery中ajax使用error調(diào)試錯(cuò)誤的方法
這篇文章主要介紹了jquery中ajax使用error調(diào)試錯(cuò)誤的方法,實(shí)例分析了Ajax的使用方法與error函數(shù)調(diào)試錯(cuò)誤的技巧,需要的朋友可以參考下2015-02-02
基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼,通過(guò)jquery鼠標(biāo)事件控制針對(duì)頁(yè)面元素的鏈?zhǔn)讲僮鲗?shí)現(xiàn)菜單切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08