.insertAfter()

.after() 和 .insertAfter() 方法执行相同的任务。主要区别在于语法，特别是在内容和目标的放置位置。使用 .after()，方法之前的选择器表达式是插入内容之后的容器。另一方面，使用 .insertAfter()，内容位于方法之前，可以是选择器表达式，也可以是动态创建的标记，它将插入目标容器之后。

考虑以下 HTML

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

我们可以创建内容并将其插入多个元素之后

$( "<p>Test</p>" ).insertAfter( ".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>

我们也可以选择页面上的一个元素，并将其插入到另一个元素之后

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

如果以这种方式选择的元素被插入到 DOM 中的另一个位置，它将被移动到目标元素之后（而不是克隆），并且返回一个包含插入元素的新集合

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

但是，如果有多个目标元素，则会为每个目标元素（第一个元素之后）创建插入元素的克隆副本，并且返回该新集合（原始元素加上克隆副本）。

在 jQuery 1.9 之前，附加到单个元素的情况不会创建新的集合，而是返回原始集合，这使得在使用未知数量的元素时难以可靠地使用 .end() 方法。

• 根据设计，任何接受 HTML 字符串的 jQuery 构造函数或方法 - jQuery()、.append()、.after() 等 - 都可能执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性（例如 <img onload="">）来实现。不要使用这些方法插入从不可信来源（如 URL 查询参数、cookie 或表单输入）获取的字符串。这样做会导致跨站点脚本 (XSS) 漏洞。在将内容添加到文档之前，请删除或转义任何用户输入。
• jQuery 不正式支持 SVG。在 SVG 文档上使用 jQuery 方法（除非该方法明确记录），可能会导致意外行为。截至 jQuery 3.0，支持 SVG 的方法示例包括 addClass 和 removeClass。