返回值:jQueryprependTo(target)

将指定的内容，插入到每个匹配元素内的开头。

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

例如，有如下的 HTML:

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

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

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

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

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

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

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

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

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

然而，如果目标元素（即被当成容器的元素）不只一个，那么会将克隆后的插入元素，插入到每个目标元素内的开头。

示例:

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

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

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

  <span>I have something to say... </span>

<script>

$("span").prependTo("#foo"); // check prepend() examples

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

演示: