after()方法在目标元素后插入兄弟节点，如$(‘#box1’).after(‘<div>新增</div>’)将新div插入#box1之后，支持html字符串、dom元素或jquery对象，与insertAfter()区别在于调用主体不同。
在 jQuery 中，after() 方法用于在指定元素的外部后面插入内容或元素。也就是说，新内容会被插入到目标元素之后，作为其下一个兄弟元素。
基本语法
$(selector).after(content)
- selector：要操作的目标元素
- content：要插入的内容，可以是 HTML 字符串、DOM 元素、jQuery 对象等
使用示例
假设有如下 HTML 结构：
<div id=”box1″>第一个盒子</div>
<div id=”box2″>第二个盒子</div>
现在我们想在 #box1 后面添加一个新的 div：
$(‘#box1’).after(‘<div class=”new-box”>新增的盒子</div>’);
执行后，HTML 变为：
<div id=”box1″>第一个盒子</div>
<div class=”new-box”>新增的盒子</div>
<div id=”box2″>第二个盒子</div>
插入多种类型内容
after() 支持多种参数形式：
- 字符串（HTML）：
.after('<p>文本段落</p>') - DOM 元素：
.after(document.createElement('span')) - jQuery 对象：
.after($('#someElement'))—— 注意这会把原元素移动位置
与 insertAfter() 的区别
两者功能相似，但调用方式不同：
- after()：调用在目标元素上：
$('#target').after('<div>new</div>') - insertAfter()：调用在要插入的内容上：
$('<div>new</div>').insertAfter('#target')
基本上就这些。使用 after() 方法能快速在元素后插入内容，适合动态生成结构或提示信息。注意插入的是兄弟节点，不是子节点。不复杂但容易忽略细节，比如移动元素时原位置会消失。