append()和appendTo()的区别

时间:2021-10-11 19:47:48

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>
    效果如图:
append()和appendTo()的区别      
但是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>
 <script type="text/javascript">
 $("#green").appendTo("div");
</script>
</body>
效果如图所示:(左边是没有用appendTo方法的,右边是用了appendTo方法的)
append()和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是可以在指定的元素下插入函数的。这个就不在这里讨论了。