jQuery_插入操作 | 易学教程

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>

结果：

来源：https://www.cnblogs.com/tkg1314/p/11978240.html

标签

option

jquery

content