jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素

更新時(shí)間：2015年01月19日 11:18:46 投稿：hebedich

這篇文章主要介紹了jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素的相關(guān)資料,需要的朋友可以參考下

利用DOM方法創(chuàng)建元素節(jié)點(diǎn)，通常要將document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻煩。

而jQuery使用$就可以直接創(chuàng)建DOM元素

var oNewP = $("<p>使用jQuery創(chuàng)建的內(nèi)容</p>");

以上代碼等同于javascript

            var oNewP2 = document.createElement("p");

            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方法

        })

        </script>

        <div id="display"></div>

使用jQuery大大縮短了代碼長(zhǎng)度。節(jié)省了編寫時(shí)間。希望本文能給小伙伴們一些提示，有疑問(wèn)請(qǐng)給我留言。

您可能感興趣的文章:

相關(guān)文章

jquery延遲對(duì)象解析
第一次認(rèn)識(shí)jquery延遲對(duì)象，這篇文章主要為大家詳細(xì)解析JQ延遲對(duì)象的相關(guān)概念,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
基于JQuery制作可編輯的表格特效
這篇文章主要介紹了基于JQuery制作可編輯的表格特效，一共給出了2種解決方案，小伙伴們能看出來(lái)哪種方案更合理嗎？
2014-12-12
jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
jquery左右滾動(dòng)焦點(diǎn)圖banner圖片,鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)，適合寬和高都比較大的頁(yè)面使用附演示，感興趣的朋友可以參考下
2013-10-10
Tab切換組件（選項(xiàng)卡功能）實(shí)例代碼
這篇文章主要介紹了一個(gè)簡(jiǎn)單的Tab切換組件實(shí)例，大家可以參考使用
2013-11-11
jquery插件懶加載的示例
這篇文章主要介紹了jquery插件懶加載的示例，幫助大家更好的利用jQuery制作網(wǎng)頁(yè)，感興趣的朋友可以了解下
2020-10-10
jQuery實(shí)現(xiàn)表格隔行換色
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格隔行換色，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
淺談jQuery中事情的動(dòng)態(tài)綁定
下面小編就為大家?guī)?lái)一篇淺談jQuery中事情的動(dòng)態(tài)綁定。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
jquery中checkbox全選失效的解決方法
這篇文章主要介紹了jquery中checkbox全選失效的解決方法,需要的朋友可以參考下
2014-12-12
jquery實(shí)現(xiàn)excel導(dǎo)出的方法
最近要實(shí)現(xiàn)在web頁(yè)面上導(dǎo)出excel文件的功能，下面是具體的實(shí)現(xiàn)方法及思路
2013-04-04
jQuery插件開發(fā)精品教程讓你的jQuery提升一個(gè)臺(tái)階
這篇文章主要介紹了jQuery插件開發(fā)精品教程讓你的jQuery提升一個(gè)臺(tái)階的相關(guān)資料,需要的朋友可以參考下
2016-01-01