前面聊append()时提到过它有个镜像方法appendTo()，两者功能一致——都是把内容追加到目标元素内部的末尾。唯一的区别就是主客置互换，这跟after()与insertAfter()的关系一模一样。理解了这一对，jQuery DOM插入的整个方法体系你就掌握了八成。
语法对比：主客体颠倒
// append()：目标元素为主语，内容为参数
$(selector).append(content);
// appendTo()：内容为主语，目标元素为参数
$(content).appendTo(selector);
执行效果没有差别，区别在于你从哪个视角去写这段代码。是站在容器角度“我要往里加东西”，还是站在新内容角度“我要把自己放进那个容器里”。
基础示例
页面上有以下段落：
<p>我是一名学习者。</p>
<p>我也是一名学习者。</p>
<button id="addTag">添加标签</button>
用appendTo()给每个段落末尾追加一个标记：
$("#addTag").click(function() {
$("<span class='tag'>【新读者】</span>").appendTo("p");
});
点击按钮后，两个段落都会变成“我是一名学习者。【新读者】”和“我也是一名学习者。【新读者】”。如果用append()来写就是$("p").append("<span class='tag'>【新读者】</span>")，结果一样。
本节课程知识要点
appendTo()的返回值是入的内容对象，这一点在开发中很有用。假设你动态创建了一个元素，添加到页面后还要接着对它做样式设置、事件绑定或动画效果，用appendTo()可以一条链式调用写到底：
$("<div class='notification'>操作成功</div>")
.appendTo("#messageBox")
.css("background", "#e8f5e9")
.fadeIn(300)
.delay(2000)
.fadeOut(300);
如果换成append()，追加后想操作这个新元素就得额外选中它，代码会散成两段：
$("#messageBox").append("<div class='notification'>操作成功</div>");
$("#messageBox .notification").last().css("background", "#e8f5e9").fadeIn(300);
显然appendTo()在“创建-插入-操作”的连续流程里更简洁，也避免了用.last()这类选择器带来的不确定性。
什么时候优先选appendTo()
我个人在以下场景会优先用appendTo()：
第一，内容是动态生成的，而且生成后需要立刻进行后续操作。这种情况appendTo()把整条操作链保持在同一行，逻辑清晰。
第二，内容本身是页面上已有的元素，你只是把它移动到另一个容器里。appendTo()的语义更像“把某个东西挪到某处”，阅读代码时一目了然：
// 把侧边栏的提示消息移到主内容区底部
$("#sidebar .alert").appendTo("#mainContent");
如果用append()来写是这样的：
$("#mainContent").append($("#sidebar .alert"));
虽然也能跑，但读代码时你得先看到目标容器，再去找被移动的元素，理解顺序不如appendTo()直观。
appendTo()与prependTo()的对应
既然有添加到末尾的appendTo()，自然有添加到开头的prependTo()。用法对称：
$(content).prependTo(selector);
这对方法配合使用，移动DOM元素时非常灵活。比如做一个置顶功能，把某条评论移到列表最上面：
$("#comment-42").prependTo("#commentList");
容易踩的坑
有一点需要留意，appendTo()和append()一样，如果目标选择器匹配到了多个元素，内容会被克隆并追加到每一个匹配元素中。所以上面例子中两个<p>都收到了新的span。如果想只追加到一个特定元素，选择器就要写精确：
$("<span>新内容</span>").appendTo("p:first"); // 只追加到第一个段落
另外一个点：如果插入的内容是页面上已经存在的元素，它会被移动而不是复制。这一点在做DOM结构调整时很方便，但如果你实际想复制一份，就得先用.clone()。
appendTo()说白了就是append()的倒装版，但倒装带来的不只是写法不同，更是链式调用方向的变化。写代码时根据“接下来要操作谁”来决定用哪个——想继续操作容器用append()，想继续操作新内容用appendTo()。把选择权握在自己手里，而不是死记硬背哪个方法对应哪种参数顺序。
