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大大縮短了代碼長度。節(jié)省了編寫時(shí)間。
希望本文所述對大家的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為頁面Dom元素綁定事件及解除綁定方法
- js/jQuery對象互轉(zhuǎn)(快速操作dom元素)
- 讀jQuery之五（取DOM元素）
- 基于Jquery的動態(tài)創(chuàng)建DOM元素的代碼
- 基于jquery的關(guān)于動態(tài)創(chuàng)建DOM元素的問題
- jQuery 創(chuàng)建Dom元素
- jQuery添加刪除DOM元素方法詳解
相關(guān)文章
實(shí)用jQuery分頁特效插件jquery.pagination.js，基于jQuery實(shí)現(xiàn)，本文給大家分享jquery分頁插件之jquery pagination，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery點(diǎn)擊縮略圖切換視頻播放，我們可以點(diǎn)擊縮略圖切換不同的視頻進(jìn)行播放，過去是實(shí)現(xiàn)圖片切換現(xiàn)在有進(jìn)一步實(shí)現(xiàn)視頻切換，感興趣的小伙伴可以參考下。2015-09-09
這篇文章主要介紹了jQuery實(shí)現(xiàn)二級下拉菜單效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
有時(shí)候我們想在js里面使用加密，jQuery就提供了這樣的插件，用法十分簡單2010-03-03
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中，測試人員報(bào)告缺陷說，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會產(chǎn)生兩條相同的記錄。2010-03-03
這篇文章主要介紹了jQuery類選擇器用法,以一個(gè)隱藏div元素的實(shí)例分析了jQuery類選擇器的用法技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)簡潔的輪播圖效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡潔的輪播圖效果,結(jié)合實(shí)例形式分析了jQuery的事件響應(yīng)機(jī)制與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
主要是利用了jquery的attr為行添加樣式來實(shí)現(xiàn)的，具體的代碼如下。2009-12-12
jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過時(shí)間函數(shù)定時(shí)觸發(fā)頁面元素樣式變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery實(shí)現(xiàn)提交按鈕點(diǎn)擊后變成正在處理字樣并禁止點(diǎn)擊的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)提交按鈕點(diǎn)擊后變成正在處理字樣并禁止點(diǎn)擊的方法,涉及jQuery中val與attr方法的使用技巧,需要的朋友可以參考下2015-03-03