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中过滤器的基本用法示例
Oct 11 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery实现简单轮播图效果
Dec 27 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
将python代码和注释分离的方法
2018/04/21 Python
python编写简单端口扫描器
2019/09/04 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Django-migrate报错问题解决方案
2020/04/21 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
大学校运会广播稿
2014/02/03 职场文书
食品安全检查制度
2014/02/03 职场文书
收银员岗位职责
2015/02/03 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技