jQuery简单实现向列表动态添加新元素的方法示例

本文实例讲述了jQuery简单实现向列表动态添加新元素的方法。分享给大家供大家参考，具体如下：

先看看效果图：

完整实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery列表添加新元素</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>li列表：</h3>
<ol>
    <li>jb51</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页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery动态添加Select的Option元素实现方法

    如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jquery动态添加元素事件失效问题解决方法

    今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(".x .y").click(function)...失效问题. 刚开始网上找到了用live函数,方法如下: 事件绑定:$(".x .y").click(function) 需改为: 复制代码 代码如下: $(".x .y").live('click',function); 但是由于1.8版本后live这种方法不再支持,所以需要用下述jquery中on方法解决脚本动态添加

  • jQuery如何获取动态添加的元素

    jQuery如何获取动态添加的元素

    一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和

  • jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • jqueryMobile 动态添加元素,展示刷新视图的实现方法

    jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复--我是很喜欢jquery的.这并不是说它很完美无暇,很多开发人员遇到的情况也都难解决,比如:尝试使用代码来添加,更新或删除元素,使用JavaScript的页面跳转.在这篇博客文章中,我列出了一些动态添加组建重新刷新的方法. 1.Textarea field $('body').prepend('<textarea id="myTextArea"&

  • jQuery动态添加的元素绑定事件处理函数代码

    我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input').click(function () { //处理代码 }); 或 复制代码 代码如下: $('.clickme').bind('click', function() { // Bound handler called.

  • jQuery动态添加、删除元素的方法

    复制代码 代码如下: <script> $.schoolFn = { addItem: function(obj){ $("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"

  • Jquery动态添加及删除页面节点元素示例代码

    通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

随机推荐