Jquery .insertBefore忽略结束标记并自动关闭缺失标记

Question

我尝试通过关闭第一个，然后用.insertBefore打开一个新的同名类，将名为“foo”的div分割为两个div。但jquery将忽略div结束标记，并自动完成与缺少结束标记的div。

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

我得到这个：

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

，但要做到这一点：通过关闭

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

我想一个DIV叫 “富” 分成两个div的，现有的一个，然后添加一个新的开标签，它会导致两个div的“foo”。

对此的任何解决方案？

完整的HTML结构：。（我想分割这“富”的更小的块几次所有的“富”来自数据库，我不能操纵它并非使用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> 

Answer 1

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

http://api.jquery.com/insertbefore/

，这是实际添加与jQuery这样

创建的元素

<div class="container"> 
    <h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <div class="inner">Goodbye</div> 
</div> 
$("<p>Test</p>").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

Answer 2

按照this SO answer创建一个有效的div HTML，您不能独立关闭标签添加到DOM。

我认为这将是可能的最简单的方法是将两个<div>元素添加到DOM，然后取出必要的额外的标签（第一<div>和最后</div>）。

Answer 3

这会将所有从第一个h2开始的所有东西移动到一个新的div中，放在h2的父母后面。它使用contents()方法，包括文本节点：

var h2 = $('h2:first'), 
 
    hp = h2.parent(), 
 
    move; 
 

 
$('<div class="foo"/>') 
 
    .insertAfter(hp) 
 
    .append(hp.contents().filter(function() { //use contents() to include text nodes 
 
    move = move || $(this).is(h2);   //move everything beginning with the first h2 
 
    return move; 
 
    }));

.foo { 
 
    background: yellow; 
 
    border: 1px solid red; 
 
    margin-bottom: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="foo"> 
 
    <span>Text here</span> 
 
    <h2>Title</h2> 
 
    <p>Text</p> 
 
    Text node here. 
 
    <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>

Answer 4

而不是试图解析它作为一个字符串，你可以简单地插入你要拆分的一个后一个新的div，和将一些内容移入其中。

jQuery(function() { 
 
    var $moving = $('h2:first, h2:first ~ *'); 
 
    $('<div class="foo"></div>') 
 
     .insertAfter($moving.parent()) 
 
     .append($moving); 
 
});

.foo { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="foo"> 
 
    <h1>Title</h1> 
 
    <p>dummy paragraph</p> 
 
    <h2>Title</h2> 
 
    <p>dummy paragraph</p> 
 
    <p>dummy paragraph</p> 
 
</div>

注意：如果你有文本节点为Foo的直接孩子，他们将不会被移动。对于您的示例HTML，这是一个非问题。

如果你真的想这样做的HTML字符串的水平，我想你可以外DOM元素转换为HTML字符串，并重新设置HTML之前做一个字符串的地方。

但需要注意的是，这会重新创建此元素的全部内容，它是兄弟，任何元素引用和事件侦听器都将被孤立。

jQuery(function() { 
 
    var $wrapper = $('h2:first').parent().parent(); 
 
    $wrapper.html($wrapper.html().replace('<h2', '</div><div class="foo"><h2')) 
 
});

.foo { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="foo"> 
 
    <h1>Title</h1> 
 
    <p>dummy paragraph</p> 
 
    <h2>Title</h2> 
 
    <p>dummy paragraph</p> 
 
    <p>dummy paragraph</p> 
 
</div>

可以限制这种影响只是你使用的是原生outerHTML瞄准DIV，但包装内的元素仍然会被重新创建。

jQuery(function() { 
 
    var wrapper = $('h2:first').parent().parent()[0]; 
 
    wrapper.outerHTML = wrapper.outerHTML.replace('<h2', '</div><div class="foo"><h2'); 
 
});

.foo { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="foo"> 
 
    <h1>Title</h1> 
 
    <p>dummy paragraph</p> 
 
    <h2>Title</h2> 
 
    <p>dummy paragraph</p> 
 
    <p>dummy paragraph</p> 
 
</div>