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卸载全部事件的思路详解
Apr 03 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jquery插件懒加载的示例
Oct 24 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python基础教程之异常详解
2019/01/10 Python
python交换两个变量的值方法
2019/01/12 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python如何读取、写入CSV数据
2020/07/28 Python
详解Anaconda 的安装教程
2020/09/23 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
python中random模块详解
2021/03/01 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
中学家长会邀请函
2014/02/03 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
上课玩手机检讨书
2014/02/08 职场文书
陈欧的广告词
2014/03/18 职场文书
代理协议书
2014/04/22 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016简单的租房合同范本
2016/03/18 职场文书