jQuery简单实现向列表动态添加新元素的方法示例


Posted in jQuery onDecember 25, 2017

本文实例讲述了jQuery简单实现向列表动态添加新元素的方法。分享给大家供大家参考,具体如下:

先看看效果图:

jQuery简单实现向列表动态添加新元素的方法示例

完整实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3water.com jQuery列表添加新元素</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>li列表:</h3>
<ol>
    <li>3water</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>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
webpack写jquery插件的环境配置
Dec 21 #jQuery
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python连接Redis的基本配置方法
2018/09/13 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python中如何使用虚拟环境
2020/10/14 Python
Python jieba库分词模式实例用法
2021/01/13 Python
python中K-means算法基础知识点
2021/01/25 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
房屋维修申请报告
2015/05/18 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
Vue如何清空对象
2022/03/03 Vue.js
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技