返回值:jQueryappendTo(target)

将指定的内容，插入到每个匹配元素内的结尾处。

.append() 和 .appendTo() 方法的功能是一样的。主要的区别在于语法指定（syntax-specifically）上，也就是说在调用方法时，选择的元素及指定的内容这两个参数的位置是不同的。对于 .append() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数。而 .appendTo() 正好相反，将要被插入的内容写在方法的前面（可以是选择器表达式或动态创建的标记），待插入内容的容器作为参数。

例如，有如下的 HTML:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

可以一次性将需要插入的内容，插入到多个元素内的尾部：

$('<p>Test</p>').appendTo('.inner');

其结果是，每个含有 inner 样式的 <div> 内的尾部，都被插入了新的内容： 

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

也可以选择页面上的元素，并将其插入到另外元素内的尾部：

$('h2').appendTo($('.container'));

通过这种方法将页面上选择的元素插入到其它地方，实际上是将原来的元素移动到新的位置，而不是将克隆后的元素插入到新的位置：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

然而，如果目标元素（即被当成容器的元素）不只一个，那么会将克隆后的插入元素，插入到每个目标元素内的尾部，然后返回新的结果集（原始元素和克隆的元素）。

示例:

将所有的 span 插入到 ID 为 "foo" 的元素内的末尾。

<!DOCTYPE html>
<html>
<head>
<style>#foo { background:yellow; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<span>I have nothing more to say... </span>

  <div id="foo">FOO! </div>

<script>

$("span").appendTo("#foo"); // check append() examples

</script>
</body>
</html>

演示: