append()和appendTo()的区别

来源：互联网发布：olap oltp 知乎编辑：程序博客网时间：2024/05/23 17:14

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方法的）

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

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

0 0