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. C++运算符重载总结（真的很详细了w(ﾟДﾟ)w）

    C++运算符重载总结(真的很详细了w(ﾟДﾟ)w) 概述 运算符重载可以使得一些特殊类型参与运算,我是这样理解的. 使用友元形式的运算符重载 //一般形式 class x{ friend 返回类型 o ...

  2. [BZOJ 3117] [NOI1999]内存分配(STL)

    [BZOJ 3117] [NOI1999]内存分配(STL) 题面 内存是计算机重要的资源之一,程序运行的过程中必须对内存进行分配. 经典的内存分配过程是这样进行的: 1.内存以内存单元为基本单位,每 ...

  3. Ubuntu中配置Python虚拟环境Virtualenv

    Ubuntu版本为18.04 Virtualenv介绍 在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4.所有第三方的包都会被pip安装到Python3的site-pac ...

  4. Spring 自定义注解，结合AOP，配置简单日志注解 （转）

    java在jdk1.5中引入了注解,spring框架也正好把java注解发挥得淋漓尽致. 下面会讲解Spring中自定义注解的简单流程,其中会涉及到spring框架中的AOP(面向切面编程)相关概念. ...

  5. 最短路（hdu2544）

    在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店到赛场的路线,你可以帮助 ...

  6. 使用mybatis插件自动生成代码以及问题处理

    1.pom.xml中加入依赖插件 <!-- mybatis generator 自动生成代码插件 --> <plugin> <groupId>org.mybatis ...

  7. Java continue 、break、标签

    任何迭代语句的主体部分都可以用break和continue控制循环流程,其中break用于强行退出循环,不执行循环中剩余的语句, 而continue则停止当前的迭代,然后退回循环起始处,开始下一次迭代 ...

  8. js 发送异步请求

    js用XMLHttpRequest发送异步请求 发送GET请求 var xhr = new XMLHttpRequest(); xhr.open('GET',url);//url为请求地址 xhr.r ...

  9. window.prompt()和 window.confirm()选择

    代码截图: 效果:  代码截图: 效果:

  10. dedecms sql 替换 或 删除

    UPDATE dede_archives SET writer='你需要修改的作者' WHERE writer=''; UPDATE dede_archives SET source='你需要修改的来 ...