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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python通过socket查询whois的方法
2015/07/18 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python switch 实现多分支选择功能
2020/12/21 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
社区端午节活动方案
2014/01/28 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电