<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input id="t1" type="text">

 <input id="a1" type="button" value="添加">

 <input id="a2" type="button" value="删除">

 <input id="a3" type="button" value="复制">

 <ul id="u1">

     <li>1</li>

     <li>2</li>

 </ul>

 <script src="jquery-1.12.4.js"></script>

 <script>

     $('#a1').click(function () {

         var v=$('#t1').val();

         var str='<li>'+v+'</li>';

         $('#u1').append(str)//在它的子标签的最后一个标签下面添加

         //$('#u1').prepend(str) 在它的子标签的第一个标签上面添加

         // $('#u1').after(str)添加在这个标签的下面和它同级

         // $('#u1').before(str)添加在这个标签的上面和他同级

     });

     $('#a2').click(function () {

        var v = $('#t1').val();

        $('#u1').children().eq(v).remove()

         //remove()删除

         //empty()清空内容标签还在

     });

     $('#a3').click(function () {

         var index = $('#t1').val();

         // clone()克隆

         var v = $('#u1').children().eq(index).clone();

         $('#u1').append(v);

     });

 </script>

 </body>

 </html>

效果如下图：

文档处理jQuery，实现添加删除复制的更多相关文章

  1. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  2. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  3. MongoDB .Net Driver(C#驱动) - 内嵌数组/嵌入文档的操作(增加、删除、修改、查询(Linq 分页))

    目录 一.前言 1. 运行环境 二.前期准备工作 1. 创建 MongoDBContext MongoDb操作上下文类 2.创建测试类 3.创建测试代码 三.内嵌数组增加元素操作 1.Update.S ...

  4. 跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

    一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left ...

  5. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  6. MongoDB中的映射，限制记录和记录拼排序 文档的插入查询更新删除操作

    映射 在 MongoDB 中,映射(Projection)指的是只选择文档中的必要数据,而非全部数据.如果文档有 5 个字段,而你只需要显示 3 个,则只需选择 3 个字段即可. find() 方法 ...

  7. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  8. jQuery CSS 添加/删除类名

    addClass(class) — 为每个匹配的元素添加指定的类名.参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)示例 一 :为匹配的元素加上 'sele ...

  9. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

随机推荐

  1. BZOJ 3673 可持久化并查集 by zky && BZOJ 3674 可持久化并查集加强版 可持久化线段树

    既然有了可持久化数组,就有可持久化并查集.. 由于上课讲过说是只能按秩合并(但是我也不确定...),所以就先写了按秩合并,相当于是维护fa[]和rk[] getf就是在这棵树中找,直到找到一个点的fa ...

  2. C#基础之类型和成员基础以及常量、字段、属性

    首先吐糟一下今天杭州的天气,真是太热了!虽然没有妹子跟我约会,但宅在方寸大的窝里,也是烦躁不已! 接上一篇<C#基础之基本类型> 类型和成员基础 在C#中,一个类型内部可以定义多种成员:常 ...

  3. python模块之datetime方法详细介绍

    datetime Python提供了许多内置模块用于操作时间日期,如calendar,time,datetime,这篇文章主要是对datetime进行汇总,datetime模块的借口实现原则更加直观, ...

  4. linux增加/删除虚拟IP地址

    网卡上增加一个IP: ifconfig eth0:1 192.168.0.1 netmask 255.255.255.0 删除网卡的第二个IP地址: ip addr del 192.168.0.1 d ...

  5. 用cookie实现记住密码

    jsp-4 用cookie实现记住密码 这次就有点简单了 基本是jsp-3的代码但是有些修改 public void login(HttpServletRequest req, HttpServlet ...

  6. angularjs $state.go页面不刷新数据

    假如进入market/beian/add添加数据,保存提交后回退market/beian列表页,没有自动更新数据,必须得手动下拉刷新才会出来 $state.go("marketBeian&q ...

  7. Spring Cloud config中，使用数据库存储配置信息

    主要内容 在springcloud config中,使用数据库存储配置信息. 系统默认采用git的方式,此处我们介绍使用jdbc的方式存储配置信息 准备数据库 数据库我们使用mysql. 新建库 p- ...

  8. ubuntu下编译安装mysql记录

         搞了整整一天,好不容易折腾完,在此记录下,下次就省事了.     去官网http://www.php.net/downloads.php下载所需要的php版本,这里我选择5.6.22.    ...

  9. 11个炫酷的 Linux 终端命令

    我已经用了十年的Linux了,通过今天这篇文章我将向大家展示一系列的命令.工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我. 1.命令行日常系快捷键 如下的快捷方式非常有用,能够 ...

  10. tomcat的备份脚本

    reference:Crontab的20个例子  先科普一下date的使用方法,在sh脚本中经常会使用得到 date -d<字符串>:显示字符串所指的日期与时间.字符串前后必须加上双引号: ...