jQuery簡單創(chuàng)建節(jié)點(diǎn)的方法
本文實(shí)例講述了jQuery簡單創(chuàng)建節(jié)點(diǎn)的方法。分享給大家供大家參考,具體如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); //創(chuàng)建一個(gè)<li>元素 //包括元素節(jié)點(diǎn),文本節(jié)點(diǎn)和屬性節(jié)點(diǎn) //其中title='香蕉' 就是創(chuàng)建的屬性節(jié)點(diǎn) var $li_2 = $("<li title='雪梨'>雪梨</li>"); //創(chuàng)建一個(gè)<li>元素 //包括元素節(jié)點(diǎn),文本節(jié)點(diǎn)和屬性節(jié)點(diǎn) //其中title='雪梨' 就是創(chuàng)建的屬性節(jié)點(diǎn) var $parent = $("ul"); // 獲取<ul>節(jié)點(diǎn)。<li>的父節(jié)點(diǎn) $parent.append($li_1); // 添加到<ul>節(jié)點(diǎn)中,使之能在網(wǎng)頁中顯示 $parent.append($li_2); // 等價(jià)于:$parent.append($li_1).append($li_2); }); //]]> </script> </head> <body> <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul> </body> </html>
效果圖如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery與JavaScript節(jié)點(diǎn)創(chuàng)建方法的對(duì)比
- jstree創(chuàng)建無限分級(jí)樹的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
- jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
- JavaScript中對(duì)DOM節(jié)點(diǎn)的訪問、創(chuàng)建、修改、刪除
- JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
- 刪除javascript所創(chuàng)建子節(jié)點(diǎn)的方法
- js創(chuàng)建元素(節(jié)點(diǎn))示例
- xml創(chuàng)建節(jié)點(diǎn)(根節(jié)點(diǎn)、子節(jié)點(diǎn))
- js和jquery對(duì)dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- jquery創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
- 創(chuàng)建二叉樹 二叉樹如何刪除節(jié)點(diǎn)操作教程
- 初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
- 淺述節(jié)點(diǎn)的創(chuàng)建及常見功能的實(shí)現(xiàn)
相關(guān)文章
jquery-syntax動(dòng)態(tài)語法著色示例代碼
語法著色大家對(duì)它都不陌生吧,下面為大家介紹的是jquery-syntax動(dòng)態(tài)語法著色的具體實(shí)現(xiàn),需要的朋友可以參考下2014-05-05jquery實(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-09jQuery用FormData實(shí)現(xiàn)文件上傳的方法
眾所周知文件上傳是Web開發(fā)中的重要話題,最直接和簡單的方式是通過表單直接提交文件。 下面這篇文章小編就來和大家分享jQuery利用FormData實(shí)現(xiàn)文件上傳的方法,文中介紹的方法簡單易懂,相信對(duì)大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果,可實(shí)現(xiàn)tab自動(dòng)定時(shí)切換的功能,涉及jQuery基于定時(shí)函數(shù)動(dòng)態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-09-09基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法,需要的朋友可以參考下2015-12-12