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把获取到的input值转换成json
May 15 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
html中两种获取标签内的值的方法
Jun 16 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python分类测试代码实例汇总
2020/07/23 Python
Python实现自动签到脚本功能
2020/08/20 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
店长岗位的工作内容
2013/11/12 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
五一家具促销方案
2014/01/10 职场文书
经管应届生求职信范文
2014/05/18 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Python之matplotlib绘制折线图
2022/04/13 Python