after()方法在目标元素后插入兄弟节点，如$('#box1').after('新增')将新div插入#box1之后，支持HTML字符串、DOM元素或jQuery对象，与insertAfter()区别在于调用主体不同。

在 jQuery 中，after() 方法用于在指定元素的外部后面插入内容或元素。也就是说，新内容会被插入到目标元素之后，作为其下一个兄弟元素。

基本语法

$(selector).after(content)

• selector：要操作的目标元素
• content：要插入的内容，可以是 HTML 字符串、DOM 元素、jQuery 对象等

使用示例

假设有如下 HTML 结构：

第一个盒子

第二个盒子

现在我们想在 #box1 后面添加一个新的 div：

$('#box1').after('

新增的盒子

');

执行后，HTML 变为：

第一个盒子

新增的盒子

第二个盒子

插入多种类型内容

after() 支持多种参数形式：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 字符串（HTML）：.after('

  文本段落

  ')
• DOM 元素：.after(document.createElement('span'))
• jQuery 对象：.after($('#someElement')) —— 注意这会把原元素移动位置

与 insertAfter() 的区别

两者功能相似，但调用方式不同：

• after()：调用在目标元素上：$('#target').after('
  new
  ')
• insertAfter()：调用在要插入的内容上：$('
  new
  ').insertAfter('#target')

基本上就这些。使用 after() 方法能快速在元素后插入内容，适合动态生成结构或提示信息。注意插入的是兄弟节点，不是子节点。不复杂但容易忽略细节，比如移动元素时原位置会消失。