返回值: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>

演示: