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>