<!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. 有效使用Mock编写java单元测试

    Java单元测试对于开发人员质量保证至关重要,尤其当面对一团乱码的遗留代码时,没有高覆盖率的单元测试做保障,没人敢轻易对代码进行重构.然而单元测试的编写也不是一件容易的事情,除非使用TDD方式,否则编 ...

  2. myeclipse9.0安装svn插件

    先得保证myeclipse9.0是可以正常使用的吧. 第一步当然是从网上下载SVN插件啦.myeclipse9.0集成的eclipse版本是属于3.x,所以下载eclipse3.x系列的SVN插件. ...

  3. 设计模式——工厂方法(Factory Method)

    定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. ——DP UML类图 模式说明 抽象业务基类 实际业务类的公共基类,也是工厂要创建的所有对象的父类,这部分 ...

  4. redmine迁移

    (redmine使用的是bitnamiredmine一键安装,环境为apache+mysql+php) 在新环境中一键安装bitnamiredmine,安装完后,执行下面操作 1.备份原环境数据库,恢 ...

  5. Python+Selenium----使用HTMLTestRunner.py生成自动化测试报告1（使用IDLE）

    1.说明 自动化测试报告是一个很重要的测试数据,网上看了一下,使用HTMLTestRunner.py生成自动化测试报告使用的比较多,但是呢,小白刚刚入手,不太懂,看了很多博客,终于生成了一个测试报告, ...

  6. Storm概念学习系列之Tuple元组（数据载体）

    不多说,直接上干货! Tuple元组 Tuple 是 Storm 的主要数据结构,并且是 Storm 中使用的最基本单元.数据模型和元组. Tuple 描述 Tuple 就是一个值列表, Tuple ...

  7. 深入理解C#中的IDisposable接口(转)

    转自:https://www.cnblogs.com/wyt007/p/9304564.html 写在前面 在开始之前,我们需要明确什么是C#(或者说.NET)中的资源,打码的时候我们经常说释放资源, ...

  8. js加密，三种编码方式

      ·escape(69个):*/@+-._0-9a-zA-Z     ·encodeURI(82个):!#$&’()*+,/:;=?@-._~0-9a-zA-Z     ·encodeURI ...

  9. 14.JAVA-jar命令使用

    介绍 jar命令用来对*.class文件进行压缩,从而生成jar(archive)归档文件,避免文件过多. 定义一个文件: package common.demo ; public class Tes ...

  10. springboot mybatis 自动生成代码（maven+IntelliJ IDEA）

    1.在pom文件中加入需要的依赖(mybatis-generator-core) 和 插件(mybatis-generator-maven-plugin) <dependency> < ...