jQuery中插入指定HTML代码失效，拆分div元素的实现方案求助

AI 小北

2026-5-15

解决jQuery插入闭合/开启标签无效的问题

这个问题其实是很多刚接触DOM操作的开发者容易踩的坑——你不能直接通过插入标签字符串的方式来拆分DOM容器，因为jQuery和浏览器会自动维护DOM结构的合法性，单独的</div>是无效的节点，会被自动修正，这就是为什么你看到的结果和预期完全相反。

为什么你的代码不生效？

当你执行$(this).before('</div> <div class="item">')时，浏览器会把这段字符串解析成合法的DOM元素：

单独的</div>没有对应的起始标签，会被浏览器直接忽略
剩下的<div class="item">会被自动补全为完整的<div class="item"></div>
所以最终插入的就是一个空的.item容器，完全达不到拆分原容器的效果。

最优解决方案：操作DOM节点而非标签字符串

正确的思路是拆分原有的.item容器，把需要分离的内容移到新创建的.item里，而不是试图手动插入闭合/开启标签。

假设你的初始DOM结构是这样的：

<div class="item">
  <!-- 前面的内容 -->
  <span class="target-element">我是要拆分的位置</span>
  <!-- 后面的内容 -->
</div>

可以用以下代码实现需求：

// 获取目标元素
const $target = $('.target-element');
// 获取目标元素所在的原.item容器
const $originalItem = $target.parent('.item');
// 创建新的.item容器
const $newItem = $('<div class="item"></div>');

// 把目标元素及其后面的所有兄弟元素移到新容器中
$target.nextAll().addBack().appendTo($newItem);

// 把新容器插入到原容器的后面
$originalItem.after($newItem);