jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法示例
本文實例講述了jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法。分享給大家供大家參考,具體如下:
先看看效果圖:
完整實現(xiàn)代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn jQuery列表添加新元素</title> <script src="jquery-1.7.2.min.js"></script> </head> <body> <h3>li列表:</h3> <ol> <li>jb51</li> <li>php</li> <li>javascript</li> <li>HTML5</li> </ol> <input type="text" id="text"> <input type="button" id="btn" value="添加"> <script type="text/javascript"> $(function () { $('#btn').click(function () { $('ol').append('<li>'+$('#text').val()+'</li>'); }); }); </script> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery頁面元素操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery實現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法
這篇文章主要介紹了jQuery實現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法,實例分析了jQuery中鼠標(biāo)事件及animate的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02基于jquery的監(jiān)控數(shù)據(jù)是否發(fā)生改變
在實際開發(fā)中經(jīng)常會遇到數(shù)據(jù)沒發(fā)生改變是,由于用戶不小心點擊保存,這樣導(dǎo)致數(shù)據(jù)庫的日志增大;還有數(shù)據(jù)填寫好后,忘了添加保存直接關(guān)閉頁面離開。2011-04-04jquery操作checked屬性以及disabled屬性的多種方法
這篇文章主要介紹了jquery控制checked屬性以及disabled屬性的多種方法,下面只提到checked,其實disabled在jquery里的用法和checked是一模一樣的,需要的朋友可以參考下2014-06-06jQuery ajax仿Google自動提示SearchSuggess功能示例
這篇文章主要介紹了jQuery ajax仿Google自動提示SearchSuggess功能,結(jié)合實例形式較為詳細的分析了jQuery結(jié)合ajax與.net后臺調(diào)用sql數(shù)據(jù)庫實現(xiàn)搜索自動提示相關(guān)操作技巧,需要的朋友可以參考下2019-03-03