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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现可以计算进制转换的计算器
Oct 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实现mysql同步的实现方法
2009/10/21 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python自动连接ssh的方法
2015/03/07 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
怎样拟定创业计划书
2014/05/01 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
归元寺导游词
2015/02/06 职场文书
大班上学期个人总结
2015/02/13 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers