jQuery簡單實(shí)現(xiàn)向列表動態(tài)添加新元素的方法示例
本文實(shí)例講述了jQuery簡單實(shí)現(xiàn)向列表動態(tài)添加新元素的方法。分享給大家供大家參考,具體如下:
先看看效果圖:

完整實(shí)現(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擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)動態(tài)顯示select下拉列表數(shù)據(jù)的方法
- jQuery實(shí)現(xiàn)動態(tài)加載select下拉列表項(xiàng)功能示例
- jQuery實(shí)現(xiàn)列表內(nèi)容的動態(tài)載入特效
- 基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動態(tài)列表效果
- jQuery動態(tài)產(chǎn)生select option下拉列表
- jQuery實(shí)現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表示例
- 如何使用Jquery動態(tài)生成二級選項(xiàng)列表
- jQuery列表動態(tài)增加和刪除的實(shí)現(xiàn)方法
相關(guān)文章
jquery 實(shí)現(xiàn)窗口的最大化不論什么情況
無論瀏覽器處于什么樣的設(shè)置,都要讓這個(gè)彈出的窗口最大化,那么怎么辦呢?下面為大家介紹下讓瀏覽器窗口從默認(rèn)大小變成我們自己的設(shè)置2013-09-09
jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法,實(shí)例分析了jQuery中鼠標(biāo)事件及animate的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變
在實(shí)際開發(fā)中經(jīng)常會遇到數(shù)據(jù)沒發(fā)生改變是,由于用戶不小心點(diǎn)擊保存,這樣導(dǎo)致數(shù)據(jù)庫的日志增大;還有數(shù)據(jù)填寫好后,忘了添加保存直接關(guān)閉頁面離開。2011-04-04
jquery操作checked屬性以及disabled屬性的多種方法
這篇文章主要介紹了jquery控制checked屬性以及disabled屬性的多種方法,下面只提到checked,其實(shí)disabled在jquery里的用法和checked是一模一樣的,需要的朋友可以參考下2014-06-06
jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)input框獲取焦點(diǎn)的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
jQuery ajax仿Google自動提示SearchSuggess功能示例
這篇文章主要介紹了jQuery ajax仿Google自動提示SearchSuggess功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合ajax與.net后臺調(diào)用sql數(shù)據(jù)庫實(shí)現(xiàn)搜索自動提示相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
JQuery表單驗(yàn)證插件EasyValidator用法分析
這篇文章主要介紹了JQuery表單驗(yàn)證插件EasyValidator用法,以實(shí)例形式系統(tǒng)分析了EasyValidator的功能特性及具體用法,是非常實(shí)用的jQuery插件,需要的朋友可以參考下2014-11-11

