.after()
.after( content [, content ] )
描述：在匹配的元素集合的每个元素后面，插入用参数指定的内容。
- content要插入到匹配的元素集合的每个元素后面的HTML字符串、DOM元素，元素的数组，或者jQuery对象。
- content一个或更多的额外的DOM元素、元素数组、HTML字符串，或者jQuery对象，用来插入到匹配的元素集合中的每个元素后面。
- function一个返回HTML字符串、DOM元素或者jQuery对象的函数，返回值将插入到匹配的元素集合中每个元素的后面。检索元素在集合中的索引位置作为参数。在函数内部，
this引用了集合中的当前元素。
.after()方法和.insertAfter()方法执行了同样的任务。主要区别是在句法中——具体地说，是内容和目标的位置。利用.after()方法，被插入的内容来自方法的参数：$(target).after(contentToBeInserted)。相较之下，利用.insertAfter()方法，要插入的内容在方法的前面，插入到目标的后面，目标是传递给.insertAfter()方法的参数：$(contentToBeInserted).insertAfter(target)
使用以下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'/>" ), newdiv2 = document.createElement( "div" ), existingdiv1 = document.getElementById( "foo" ); $( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );
因为.after()方法可以接受任意数量的附加参数，传入三个<div>作为三个独立的参数，也可以实现同样的结果，像这样：$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 )。参数的类型和数量很大程度上取决于在代码中被收集起来的元素。
其它说明
- 在jQuery 1.9以前的版本中，如果集合中的第一个节点没有联系到一个document，
.after()方法会试图添加或改当前jQuery集合中的节点，那样的话，会返回一个新jQuery集合，而不是返回原始的集合。这个方法不一定能够返回一个新的结果，取决于它的参数的数量或者它的参数的连接性。自从jQuery 1.9版以来，.after()、.before()和.replaceWith()方法将总是返回原始的未修改的集合。试图在没有父元素的节点上使用这些方法没有什么效果那是说，集合以及它包含的节点都没有改变。 - 根据设计意图，任何可以接受一个HTML字符串的jQuery构造器或者方法——
jQuery()、.append()、.after()等等——都可以潜在地执行代码。这可能发生脚本标签注入，或者使用HTML元素属性执行代码（例如，<img onload="">）。千万不要用这些方法来插入从不可信任的来源获得的字符串，比如说URL查询参数、cookies，或者表单输入。这样做会导致跨站脚本缺陷（XSS）。在往document添加内容之前要删除或转义一切的用户输入。
示例
在所有的段落文本后面插入一些HTML。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).after( "<b>Hello</b>" );
</script>
</body>
</html>
演示结果
在所有的段落文本后面插入一个DOM元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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 lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Hello</b>
<p>I would like to say: </p>
<script>
$( "p" ).after( $( "b" ) );
</script>
</body>
</html>
演示结果