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实现的简单在线计算器功能
May 11 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jQuery实现穿梭框效果
Jan 19 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中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
酒店副总岗位职责
2013/12/24 职场文书
晚会主持词开场白
2014/03/17 职场文书
消防工作实施方案
2014/06/09 职场文书
村级个人对照检查材料
2014/08/22 职场文书