在接触jQuery DOM操作时，有两个方法特别容易混淆——after()和append()。虽然它们都涉及“在某个地方放东西”，但实际行为不同。简单说，append()是把内容塞进元素内部的最末尾，而after()是把内容放在元素外部、紧跟在目标元素之后。如果搞反了，页面结构可能和你预想的不一样。
语法结构
$(selector).after(content, function(index))
参数说明
-
content（必需）：要插入的内容，支持HTML字符串、jQuery对象、DOM元素
-
function(index)（可选）：一个返回插入内容的回调函数，index表示当前元素在中的索引位置
本节课程知识要点
在开发中，我建议优先使用after()来处理元素外部的兄弟节点插入，而不是尝试用append()配合复杂的DOM遍历来实现同样效果。原因很简单——代码可读性差，而且容易因为DOM结构变动导致插入位置错乱。after()语义明确，维护成本低。
与append()的核心区别
-
append()：在选中元素内部的末尾添加内容 -
after()：在选中元素外部的后面添加内容
举个例子更容易理解。假设你有一段HTML：
<div id="box"><p>原有内容</p></div>
用append()：
$("#box").append("<p>append新增</p>");
结果变成：
<div id="box">
<p>原有内容</p>
<p>append新增</p>
</div>
用after()：
$("#box").after("<p>after新增</p>");
结果变成：
<div id="box">
<p>原有内容</p>
</div>
<p>after新增</p>
区别一目了然。after()新增的段落跑到了div外面，成为div的兄弟节点。
使用回调函数的场景
after()的回调函数参数index很有用，尤其是在处理多个匹配元素时。比如有一组列表项，你想在每项后面插入带有序号的备注：
$("li").after(function(index) {
return "<span class='note'>第" + (index + 1) + "项备注</span>";
});
这段代码会为每个<li>元素后面添加一个带有编号的span标签。index从0开始计数，所以加上1变成直观的序号。
个人经验之谈
刚学jQuery那会儿，我经常在after()里塞纯文本，结果发现浏览器把文本当成了HTML解析。如果你要插入的是用户输入的内容，务必进行转义处理，否则XSS漏洞就找上门了。如果目标元素是动态生成的，记得用事件委托或者确保在DOM就绪后再执行after()操作。
与before()的对应关系
有after()自然就有before()。before()在目标元素之前插入内容，语法一致：
$("p").before("<h3>前置标题</h3>");
这对兄弟方法掌握了，jQuery的DOM外部插入操作基本就没盲区了。
常见误区
很多人以为after()会在每个匹配元素之后追加一次，其实它是对每个匹配元素各自执行一次外部后插入。如果jQuery对象选中了3个div，那每个div后面都会出现一份插入内容。想只插入一次，就需要精确选中目标元素。
以上就是jQuery after()方法的核心用法。DOM操作是前端交互的骨架，理解清楚内部插入（append/prepend）和外部插入（after/before）的区别，能帮你少走不少调试弯路。
