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实现字体颜色渐变效果的方法
Mar 29 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
教师节活动主持词
2014/04/02 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
法学专业求职信范文
2015/03/19 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
mysql字符串截取函数小结
2021/04/05 MySQL
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL