返回值:jQueryafter(content, [content])

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

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

例如，有如下的 HTML:

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

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

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

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

<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'));

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

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

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

插入断开的 DOM 节点（Inserting Disconnected DOM nodes，即，只有结束标签的元素）

从 jQuery 1.4 开始, .before() 和 .after() 可以在断开的 DOM 节点（disconnected DOM nodes，即，只有结束标签的元素）上使用。例如，有如下的代码： 

$('<div/>').after('<p></p>');

结果是 jQuery 集合中含有一个 div，在其后还有一个段落。在它们被插入到文档之前，我们甚至还可以操作它们。

$('<div/>').after('<p></p>').addClass('foo')
  .filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

上述代码执行的结果是，在 </body> 标签之前，插入了如下元素: 

<div class="foo"></div>
<p class="foo" id="bar">hello</p>

将函数作为参数

从 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"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');

$('p').first().after($newdiv1, [newdiv2, existingdiv1]);

因为 .after() 可以接收多个额外的参数，所以上面的例子中，也可以将三个独立的 <div> 分别作为参数传给该方法，就像这样： $('p').first().after($newdiv1, newdiv2, existingdiv1)。参数的类型和数量，将在很大程度上取决于你是如何选择元素的。

示例:

在所有的段落后，追加一些 HTML。

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

<p>I would like to say: </p>

<script>

$("p").after("<b>Hello</b>");

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

演示:

示例:

在所有的段落后，追加一个元素。

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

<p>I would like to say: </p>

<script>

$("p").after( document.createTextNode("Hello") );

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

演示:

示例:

在所有的段落后，追加一个 jQuery 对象（类似于一个 DOM 元素数组）。

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

<b>Hello</b><p>I would like to say: </p>

<script>

$("p").after( $("b") );

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

演示: