.before()

.before()方法和.insertBefore()方法实施了相同的任务。其主要区别在语法中——特别是，内容和目标的位置。利用.before()，要插入的内容来自于方法的参数：$(target).before(cotentToBeInserted)。另一方面，利用.insertBefore()，内容在方法前面，被插入到目标前面，目标被传递为.insertBefore()方法的参数。

请考虑以下HTML：

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

你可以创建内容，并一次性把它插入到若干个元素前面：

$( ".inner" ).before( "<p>Test</p>" );

每个<div.inner>元素取得了最新内容：

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

你还可以从网页上选择一个元素，并把它插入到另一个元素前面：

$( ".container" ).before( $( "h2" ) );

如果用这种方法选中的元素被插入到DOM中的另一个位置，它会被移去见到目标的前面（而不是克隆过去）。

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

重点：然而，如果存在不止一个目标元素，将会针对除了最后一个目标元素之外的目标元素创建被插入元素的副本。

额外的参数

类似于别的内容添加方法，譬如.prepend()方法和.after()，.before()还支持传入多个参数作为输入。受支持的输入参数包括DOM元素、jQuery对象、HTML字符串以及DOM元素的数组。

例如，下面的代码将在第一个段落前面插入两个新的<div>以及一个已有的<div>：

var newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );

因为.before()可以接受任意个额外参数，可以通过传入三个<div>作为三个分开的参数来实现同样的结果，比如：$( "p" ).first().before( $newdiv1, newdiv2, existingdiv1 )。参数的类型和数目将很大程度上取决于你如何在代码中收集元素。

• 在jQuery 1.9以前，.before()将试图添加或修改当前jQuery集合中的节点，如果此集合的第一个节点没有连接到文档，那样的话将返回一个新的jQuery集合，而不是原始的集合。此方法可能会返回也可能不会返回一个新结果集，取决于它的参数的数目或连接性。自从jQuery 1.9以来，.after()、.before()和.replaceWith()始终返回原始的未经修改的集合。在没有父元素的节点上尝试使用这些方法不会有效果——也就是说，集合与它包含节点都不会有改变。
• 根据设计，任何接受HTML字符串的jQuery构造函数或方法——jQuery()、.append()、.after()等等——都可以潜在地执行代码。通过脚本标签注入或者使用执行代码的HTML特性（例如，<img onload="">）也能发生这种情况。不要使用这些方法来插入来自不可信任的来源的字符串，譬如URL查询参数、cookies，或表单输入。如果那样做的话会导致跨域脚本（XSS）漏洞。在把内容添加到文档之前，请先删除或转义任何用户输入。