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 zTree树插件动态加载实例代码
May 11 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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 函数语法介绍一
2009/06/14 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
javascript中对对层的控制
2006/12/29 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
vue实例的选项总结
2020/06/09 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
北大自主招生自荐信
2013/10/19 职场文书
仓库组长岗位职责
2014/01/29 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书