Javascript insertBefore忽略关闭标记并自动关闭丢失的标记

我尝试将一个名为“foo”的div拆分为两个div，方法是关闭第一个div，然后使用.insertBefore打开一个具有相同类的新div。但是jquery将忽略div结束标记，并使用缺少的结束标记自动完成div

$( '</div><div class="foo">' ).insertBefore( 'h2:first' );

$（“”）.insertBefore（'h2:first'）；

我明白了：

<div class="foo"></div>
<h2>Title</h2>

标题

但要做到这一点：

</div><div class="foo">
<h2>Title</h2>

标题

我试图将一个名为“foo”的div拆分为两个div，方法是关闭现有的一个div，然后添加一个新的开始标记，这将导致两个div的“foo”

有什么解决办法吗

完整的html结构：（我想把它分成几个较小的“foo”块。来自“foo”的所有内容都来自数据库，除了使用jquery/js，我无法操作它

<div class="foo">
    <span>Text here</span>
    <h2>Title</h2>
    <p>Text</p>
    <h2>Title</h2>
    <p>Text</p>
    <h2>Title</h2>
    <p>Text</p>
    <h3>Another title</h3>
    <h2>Title</h2>
    <p>Text</p>
    <h2>Title</h2>
    <p>Text</p>
    <h3>Another title</h3>
    <h2>Title</h2>
    <p>Text</p>
</div>

此处文本
标题
正文

标题
正文

标题
正文

另一个标题
标题
正文

标题
正文

另一个标题
标题
正文

您可以从之前的文档插入中看到：

它实际上是在添加一个用jquery创建的元素，如下所示

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertBefore( ".inner" );

问候语
你好
再见
$（“Test
”）.insertBefore（“.inner”）；

因此,

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

问候语
试验

你好
试验

再见

因此它是使用jquery创建的有效div html

根据，您不能向DOM添加独立的结束标记

---

我认为最简单的方法是向DOM添加两个

元素，然后删除额外的标记（第一个

和最后一个

）必要时。

这将把从第一个

h2

开始的所有内容移动到新的

div

，放置在

h2

的父节点之后。它使用

contents（）

方法包括文本节点：

var h2=$（'h2:first'），
hp=h2.parent（），
移动
$('')
.insertAfter（hp）
.append（hp.contents（）.filter（函数（）{//使用contents（）包含文本节点
move=move | |$（this）.is（h2）；//移动从第一个h2开始的所有内容
回击动作；
}))；

.foo{
背景：黄色；
边框：1px纯红；
边缘底部：1米；
}

此处文本
标题
正文

这里是文本节点。
标题
正文

标题
正文

另一个标题
标题
正文

标题
正文

另一个标题
标题
正文

您可以在要拆分的div之后插入一个新div，并将部分内容移动到其中，而不是将其全部解析为字符串

jQuery（函数（）{
var$moving=$（'h2:first，h2:first~*'）；
$('')
.insertAfter（$moving.parent（））
.附加（$移动）；
})；

.foo{
边框：1px纯黑；
}

标题
虚拟段落

标题
虚拟段落

虚拟段落

您能显示您试图更改的HTML吗？您的HTML在解析时会被规范化。您试图完成什么？您试图做的事情没有意义。请详细介绍HTML结构以及您为什么尝试这样做this@charlietfl我相信这是有道理的。也许OP只是想结束一个div，再添加一个…@Jon这是一个可以理解的愿望，根本不是jQuery和DOM的实际工作方式。问题背后有一个误解。你不能通过删除结束标记来操纵DOM…没有办法做到这一点。答案没有问题更有意义does@charlietfl因为（阿飞）没有办法做到这一点，这只是一个建议。尽管您无法操纵DOM来删除结束标记，但您可以使用正则表达式来删除它（尽管这是一种不好的做法——但是，如果其他方法都失败了，这只是一个建议）。如果原始的

.foo

不包含任何文本节点子项，则此选项有效。否则，它们将不会被移动。感谢此选项，是否可以直接在中添加结束标记？@coder否，这是不可能的。您需要了解html是通过浏览器转换为dom节点对象的。@coder这只是一种possible，通过使用innerHTML/outerHTML和字符串替换，但它带来了一些潜在的负面影响。