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 Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现雪花飘落效果
Aug 02 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模拟HTTP认证
2006/10/09 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
python 实时遍历日志文件
2016/04/12 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Python3多线程操作简单示例
2018/05/22 Python
详解flask表单提交的两种方式
2018/07/21 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
django的ORM操作 增加和查询
2019/07/26 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python中tab键是什么意思
2020/06/18 Python
python实现无边框进度条的实例代码
2020/12/30 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
夜大自我鉴定
2013/10/31 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
自我推荐书
2013/12/04 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
高三政治教学反思
2014/02/06 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
晚会主持词开场白
2014/03/17 职场文书
公司承诺书范文
2014/05/19 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书