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 表单序列化实例代码
Jun 11 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JQuery animate动画应用示例
May 14 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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中simplexml_load_string函数使用说明
2011/01/01 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
越南综合购物网站:Lazada越南
2019/06/10 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
什么是URL
2015/12/13 面试题
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
《大海那边》教学反思
2014/04/09 职场文书
入股协议书范本
2014/11/01 职场文书
公司保密管理制度
2015/08/04 职场文书
导游词之上海豫园
2019/10/24 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript