jquery的API查看 / prepend、prependTo、append、appendTo的用法

时间：2024-04-12 12:36:36
理解jquery设计思想
记住大部分jquery API的使用
prepend、append、appendTo、prependTo的用法
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            div.div{border: 1px solid red;}

            p{color:green;}

            h1{color:darkgoldenrod;}

            input{

                display: block;

                margin-bottom: 4px;

            }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="div"><span>div</span></div>

            <p>p标签</p>

        </div>

        <input type="button" value="重置 " id="reset"/>

        <input type="button" value="append--把p标签移动到div标签里  ---实则为移动元素" id="btn1"/>

        <input type="button" value="append--复制p标签到div标签里，原来的标签还保留着(克隆)" id="btn2"/>

        <input type="button" value="appendTo--将p标签追加到div元素   ---实则为移动元素" id="btn3"/>

        <input type="button" value="appendTo--新建元素p追加到div中的元素集合内部的最后面" id="btn4"/>

        <input type="button" value="prependTo--将新建的p元素插入到div中的元素集合内部的最前面" id="btn5"/>

        <input type="button" value="prepend--将新建的h1插入到div中的元素集合内部的最前面" id="btn6"/>

        <input type="button" value="prepend--将已有的p标签插入到div中的元素集合内部的最前面 -- 实则为移动元素" id="btn7"/>

    </body>

    <script src="http://code.jquery.com/jquery.js"></script>

    <script>

        $(function(){

            var str = $('.main').html();

            $("#reset").click(function(){

                $('.main').html(str);

            })

            $("#btn1").click(function(){

                //把p标签移动到div标签里

                $('.div').append( $('p'));

            })

            $("#btn2").click(function(){

                //只是复制一份到div标签里，原来的标签还保留着(克隆)

                $('.div').append( $('p').clone(true))

            })

            $("#btn3").click(function(){

                //将p追加到div元素   ---实则为移动元素

                $('p').appendTo($('.div'));

            })

            $("#btn4").click(function(){

                //新建元素p追加到div元素中

                $('<p>新建元素p追加到div中的元素集合内部的最后面</p>').appendTo($('.div'));

            })

            $("#btn5").click(function(){

                //将新建的p元素插入到div中的元素集合内部的最前面

                $('<p>将新建的p元素插入到div中的元素集合内部的最前面</p>').prependTo($('.div'));

            })

            $("#btn6").click(function(){

                //将新建的h1插入到div中的元素集合内部的最前面

                $('.div').prepend('<h1>将新建的h1插入到div中的元素集合内部的最前面</h1>');     //值得注意的是prepend函数后面的参数是内容，不是对象。而prependTo函数前后都是对象。

            })

            $("#btn7").click(function(){

                //将已有的p元素插入到div中的元素集合内部的最前面 -- 实则为移动元素

                $('.div').prepend($('p'));

            })

        })

    </script>

</html>

相关文章