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常见面试题之DOM操作详析
Jul 05 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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经典的给图片加水印程序
2006/12/06 PHP
PHP代码优化的53个细节
2014/03/03 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
Angular工具方法学习
2016/12/26 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
销售自荐信
2013/10/22 职场文书
疾病捐款倡议书
2014/05/13 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
党委工作总结2015
2015/04/27 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
Pygame Time时间控制的具体使用详解
2021/11/17 Python