jquery的API查看 / prepend、prependTo、append、appendTo的用法-优快云博客

本文详细介绍了jQuery中元素操作的方法，包括如何使用append、prepend、appendTo和prependTo等函数来添加或移动DOM元素，并通过实例演示了这些函数的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

理解jquery设计思想

记住大部分jquery API的使用

英文： http://api.jquery.com/

中文： http://www.css88.com/jqapi-1.9/

http://tangram.baidu.com/api

prepend、append、appendTo、prependTo的用法

效果预览： http://runjs.cn/detail/vwfyfjza

<!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>