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选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现购物车全功能
Jan 11 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
Terran剧情介绍
2020/03/14 星际争霸
PHP 中执行系统外部命令
2006/10/09 PHP
php SQL之where语句生成器
2009/03/24 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Python语法快速入门指南
2015/10/12 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS