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编写textarea输入字数限制代码
Mar 23 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery操作之效果详解
May 19 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery插件实现代码雨特效
Apr 24 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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php-fpm中max_children的配置
2019/03/15 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
js实现常用排序算法
2016/08/09 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python实现linux下抓包并存库功能
2018/07/18 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
村长贪污检举信
2014/04/04 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
转学证明范本
2015/06/19 职场文书