append()和appendTo()的区别

一直以为jquery里面的append方法和appendTo方法作用是一样的，都是表示在指定元素的结尾插入内容，无非也就是用法是相反的而已。

append的语法是：

$(selector).append(content)

appendTo的语法是：

$(content).appendTo(selector);

如下图的代码所示：

<body>
    <div>
        <span style="background-color: red;">小乌龟</span>
    </div>
    <script type="text/javascript">
        var $html_append="<span style='background-color: green;'>通过append插入的</span>";
        var $html_appendto="<span style='background-color: yellow;'>通过appendTo插入的</span>";
        $("div").append($html_append);
        $($html_appendto).appendTo("div");
    </script>
</body>

效果如图：

但是appendTo呢，还可以这样：

<body>
    <div>
        <span style="background-color: red;">小乌龟</span>
    </div>
<span style="color:#333332;"><span style="font-size:18px;"></span></span><pre name="code" class="javascript">    <span id="green" style="background-color: green;">green</span>

效果如图所示：（左边是没有用appendTo方法的，右边是用了appendTo方法的）
append()和appendTo()的区别

可以看出，appendTo方法是可以移动页面中的对象而不是复制，如果对象不仅一个的话，比如说是多个span，同样也是移动对象到指定的元素下而不是复制，那append方法是否也能实现这个移动元素的作用呢？

<body>
    <div>
        <span style="background-color: red;">小乌龟</span>
    </div>
    <span id="yellow" style="background-color: yellow;">黄色</span>
    <p style="background-color: green;">绿色</p>

 <script type="text/javascript">
        $("div").append("#yellow");
        $("div").append('p');
 </script>
</body>

效果如下：

append()和appendTo()的区别

可以看出append方法是无法在指定元素内添加其他的元素的，默认会把添加的元素以字符串的形式输出在指定的元素下面。所以也就是说append无法移动元素到指定的元素下面。

不过呢，append和appendTo还有一个区别是append是可以在指定的元素下插入函数的。这个就不在这里讨论了。

秒客网

append()和appendTo()的区别

append()和appendTo()的区别

相关文章