.after()

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

使用下面的HTML：

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

可以创建内容，然后一次性插入在若干个元素后面：

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

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

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

可以选择DOM中的一个元素，然后插入在另一个元素后面：

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

如果通过此方法选择的元素被插入到DOM中别处的位置，就将移动它，而不是克隆它。

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

重要：然而，如果有不止一个目标元素，将针对每个目标中除了最后一个目标之外的目标创建被插入的元素的克隆副本。

传递一个函数

自从jQuery 1.4以来，.after()支持传递一个函数，返回要插入的元素。

$( "p" ).after(function() {
  return "<div>" + this.className + "</div>";
});

此示例把一个<div>插入到每个段落后面，每个<div>包含了它前面段落的样式类名。

额外的参数

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

例如，下成将在第一个段落后面插入两个新的<div>及一个已有的<div>

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

因为.after()可以接受任意数量的额外的参数，所以像这样$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 )，通过传入三个<div>作为三个独立的参数，也可以实现同样的结果。参数的类型和数目将很大程度上取决于代码中收集的元素。

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