# .after()

所属分类：DOM 操作 > DOM 插入现有元素外 英文文档：.after()

## .after( content [, content ] )返回: jQuery

描述: 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

- #### 添加的版本: 1.0.after( content [, content ] )

  - content
    类型: String, Element, jQuery
    一个元素，HTML字符串，或者jQuery对象，用来插在每个匹配元素的后面。
  - content
    类型: String, Element, Array, jQuery
    添加的一个或多个DOM元素，元素的数组，HTML字符串，或jQuery对象，插在每个匹配元素的后面

- #### 添加的版本: 1.4.after( function(index) )

  - function(index)
    类型: Function()
    一个返回HTML字符串，DOM 元素， 或者 jQuery 对象的函数，插在每个匹配元素的后面。接收元素在集合中的索引位置作为参数。在函数中`this`指向元素集合中的当前元素。

`.after()`和`.insertAfter()`实现同样的功能。主要的不同是语法——特别是内容和目标的位置。 对于`.after()`, 选择表达式在函数的前面，参数是将要插入的内容。 对于`.insertAfter()`, 刚好相反，内容在方法前面，它将被放在参数里元素的后面。

请看下面的HTML:

1 2 3 4 5 |
    <div class="container">  <h2>Greetings</h2>  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>

我们可以创建内容然后同时插在好几个元素后面：

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

每个内部的 `<div>` 元素得到新的内容：

1 2 3 4 5 6 7 |
    <div class="container">  <h2>Greetings</h2>  <div class="inner">Hello</div>  <p>Test</p>  <div class="inner">Goodbye</div>  <p>Test</p></div>

我们也可以在页面上选择一个元素然后插在另一个元素后面：

1 |
    $('.container').after($('h2'));

如果一个被选中的元素被插在另外一个地方，这是移动而不是复制：

1 2 3 4 5 |
    <div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div><h2>Greetings</h2>

如果有多个目标元素，内容将被复制然后被插入到每个目标后面。

#### Inserting Disconnected DOM nodes（插入分离的DOM节点）

对于jQuery 1.4, `.before()`和`.after()`同时也会对分离的DOM元素有效。例如，下面的代码：

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

结果是一个包含一个div和一个段落的JQuery集合。因此，我们可以更进一步操作这个集合，即使在将它插入document之前。

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

结果是下面的代码被插到`</body>`标签之前：

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

#### Passing a Function(传递一个函数)

从jQuery 1.4开始, `.after()`允许我们传入一个函数，该函数返回要被插入的元素。

1 2 3 |
    $('p').after(function() {  return '<div>' + this.className + '</div>';});

上面的代码在每个段落后插入一个`<div>`，`<div>`里面是该段落的class名称。

#### Additional Arguments（额外的参数）

和其他添加内容的方法类似， 如`.prepend()` 和 `.before()`, `.after()` 还支持传递输入多个参数。 支持的输入包括DOM元素，jQuery对象，HTML字符串，DOM元素的数组。

例如，下面将插入两个新的<div<和现有的<div<到第一个段落后面：

1 2 3 4 5 |
    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)`。参数的类型和数量，将在很大程度上取决于你是如何选择元素的。

## 例子:

#### Example: 在所有的段落后插入一些HTML。

1 2 3 4 5 6 7 8 9 10 11 12 |
    <!DOCTYPE html><html><head>  <style>p { background:yellow; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>I would like to say: </p><script>$("p").after("<b>Hello</b>");</script> </body></html>

#### Demo:

#### Example: 在所有的段落后插入一个DOM元素。

1 2 3 4 5 6 7 8 9 10 11 12 |
    <!DOCTYPE html><html><head>  <style>p { background:yellow; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>I would like to say: </p><script>$("p").after( document.createTextNode("Hello") );</script> </body></html>

#### Demo:

#### Example: 在所有段落后插入一个jQuery对象。

1 2 3 4 5 6 7 8 9 10 11 12 |
    <!DOCTYPE html><html><head>  <style>p { background:yellow; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <b>Hello</b><p>I would like to say: </p><script>$("p").after( $("b") );</script> </body></html>

#### Demo: