返回值:jQueryinsertBefore(target)

将指定的内容，插入到每个匹配元素的前面，作为其兄弟节点。

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

例如，有如下的 HTML:

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

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

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

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

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

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

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

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

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

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

示例:

当所有的段落插入到 id 为 "foo" 的元素的前面。等同于 $("#foo").before("p")

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

<div id="foo">FOO!</div><p>I would like to say: </p>

<script>

$("p").insertBefore("#foo"); // check before() examples

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

演示: