jQuery的插入方法有很多，有内部插入，也有外部插入，每个插入方式里面还有很多种，本文一一介绍，注释在代码里，直接上代码：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文档处理_插入操作</title>

        <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            /**

             * 需求

             *  在id=edu下增加<option value="大专">大专</option>

             */

            /**

             * 方法分析：

             *  内部插入

             *         1.append(content):内部结尾处，将B追加到A里面去

             *      2.appendTo(content):内部结尾处，将A追加到B里面去

             *      3.prepend(content):内部开始处，将B追加到A里面去

             *      4.prependTo(content):内部开始处，将B追加到A里面去

             *     外部插入

             *      1.after(content):外部，将B追加到A后面

             *         2.before(content):外部，将A追加到B前面

             *         3.insertAfter(content):外部，将A追加到B后面

             *         4.insertBefore(content)::外部，将A追加到B前面

             */

            $(function() {

                // 追加 option 内容大专

                // 创建元素

                var $newNode = $("<option value='大专'>大专</option>");

                //内部插入

                //$("#edu").append($newNode);   // 内部结尾，将B追加到A里面去

                //$("#edu").prepend($newNode);  // 内部开始，将B追加到A里面去

                //外部插入

                //$("option[value='本科']").after($newNode);

                $newNode.insertBefore($("option:contains('硕士')"));

            });

        </script>

    </head>

    <body>

        <select id="edu">

            <option value="博士">博士</option>

            <option value="硕士">硕士</option>

            <option value="本科">本科</option>

            <option value="高中">高中</option>

        </select>

    </body>

</html>

结果：

5

jQuery_插入操作的更多相关文章

  1. MongoDB 文档的查询和插入操作

    MongoDB是文档型数据库,有一些专门的术语,和关系型DB相似,但也有差异,例如,Collection类似于关系型DB的Table,document类似于row,key/value pair类似于c ...

  2. 关于有默认值的字段在用EF做插入操作时的思考（续）

    问题描述 今天下午(看现在这时间,应该是昨天下午了哈),园友 choon 写了这样一篇博文<关于有默认值的字段在用EF做插入操作时的思考>. 博文内容主要记录的是 choon 使用 EF ...

  3. 关于有默认值的字段在用EF做插入操作时的思考

    今天在用EF做插入操作的时候发现数据库中一个datetime类型的字段(CreateDate)的值居然全部为null.于是赶紧看表结构发现CreateDate字段居然是允许为空的. 虽然为空,但是设置 ...

  4. AVL树插入操作实现

    为了提高二插排序树的性能,规定树中的每个节点的左子树和右子树高度差的绝对值不能大于1.为了满足上面的要求需要在插入完成后对树进行调整.下面介绍各个调整方式. 右单旋转 如下图所示,节点A的平衡因子(左 ...

  5. SQLite 批量insert - 如何加速SQLite的插入操作

    本人翻译, 原文见: http://tech.vg.no/2011/04/04/speeding-up-sqlite-insert-operations/ 我正在开发一个Android程序, 它使用S ...

  6. Oracle 数据库中日期时间的插入操作

    Oracle 中如何插入日期时间类型的数据,首先为了演示, 新建数据表如下 create table t( mydate date); 插入日期时间 SQL> insert into t val ...

  7. AVL树的插入操作（旋转）图解

    =================================================================== AVL树的概念       在说AVL树的概念之前,我们需要清楚 ...

  8. Entity Framework 的小实例：在项目中添加一个实体类，并做插入操作

    Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

  9. hadoop执行hdfs文件到hbase表插入操作(xjl456852原创)

    本例中需要将hdfs上的文本文件,解析后插入到hbase的表中. 本例用到的hadoop版本2.7.2 hbase版本1.2.2 hbase的表如下: create 'ns2:user', 'info ...

随机推荐

  1. java-selenium定位元素和操作元素

    八种定位方式 一.By.id(id):通过ID 属性查找 HTML 源码 <a onclick="return false;" id="lb" name= ...

  2. 掌握MyBatis的核心对象

    一.获取SqlSessionFactoryBuilder对象 1.SqlSessionFactoryBuilder的作用 所有的MyBatis应用都是以SqlSessionFactory实例为中心.S ...

  3. Django发送邮件和itsdangerous模块的配合使用

    项目需求:用户注册页面注册之后,系统会发送一封邮件到用户邮箱,用户点击链接以激活账户,其中链接中的用户信息需要加密处理一下 其中激活自己邮箱的smtp服务的操作就不在加以说明,菜鸟教程上有非常清晰的讲 ...

  4. 2019中山纪念中学夏令营-Day4[JZOJ]

    Begin (题目的排序方式:难易程度) 什么是对拍: 对拍是一种在写完程序后,验证自己程序是不是正解的比较方便的方法. 实现过程: 对同一道题,再打一个暴力程序,然后用一些大数据等跑暴力程序来进行验 ...

  5. TCP 三次握手和四次挥手

    TCP 三次握手和四次挥手 作为面试会被经常考察的的点,自己复习了一下,总结如下: TCP 三次握手 先上图: 所谓三次握手,是指建立一个 TCP 连接时,需要客户端和服务器总共发送 3 个包. 第一 ...

  6. try catch和finally

    在C#中这三个关键字用于处理异常. 这三个关键字try是必定要用的,要不然就失去了意义.然后catch和finally可以不用但是要注意遵循原则. 存在一个或多个catch的时可以不用finally, ...

  7. SpringDataJpa实体类常用注解

    最近公司在使用SpringDataJpa时,需要创建实体类,通过实体类来创建数据库表结构,生成数据库表. 下面我们就来看下在创建实体类时一些常用的注解吧!!! 1.实体类常用注解 @Entity 标识 ...

  8. python进阶资源

    本文为不同阶段的Python学习者从不同角度量身定制了49个学习资源. 初学者 Welcome to Python.org https://www.python.org/ 官方Python站点提供了一 ...

  9. TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈

    TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈  本文对TVM的论文进行了翻译整理 深度学习如今无处不在且必不可少.这次创新部分得益于可扩展的深度学习系统,比如 TensorFlo ...

  10. golang常见的几种并发模型框架

    原文链接 package main import ( "fmt" "math/rand" "os" "runtime" ...