在元素後面添加div並在內容後面結束div

Question

我有一個h2和一個段落。我想在h2之後添加一個div，但我想要ul和該div中的段落。 現在看起來是這樣的：

<h2>test</h2> 
    <div id="test"></div> 
<p>test</p> 
<ul> 
    <li>testlijst</li> 
</ul> 

而且它必須是這樣的：

<h2>test</h2> 
    <div id="test"> 
<p>test</p> 
<ul> 
    <li>testlijst</li> 
</ul> 
</div> 

我用：

$('h2').after('<div id="test"></div>'); 

的DIV已經被放置在H2和結束後在內容之後或者在下一個h2開始時，因爲內容可能不同。

Answer 1

您可以使用.wrapAll（）的所有接下來的兄弟姐妹h2

$('#faq h2').each(function() { 
 
    $(this).nextUntil('h2').wrapAll('<div id="test"></div>'); 
 
})

#test { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="faq"> 
 
    <h2>test</h2> 
 
    <p>test</p> 
 
    <ul> 
 
    <li>testlijst</li> 
 
    </ul> 
 
    <h2>test</h2> 
 
    <p>test</p> 
 
    <ul> 
 
    <li>testlijst</li> 
 
    </ul> 
 
    <h2>test</h2> 
 
    <p>test</p> 
 
    <ul> 
 
    <li>testlijst</li> 
 
    </ul> 
 
</div> 
 
<h2>test2</h2> 
 
<p>test</p> 
 
<ul> 
 
    <li>testlijst</li> 
 
</ul>

Answer 2

試試這個：

var div = $('<div id="test"></div>'); 
div.append($('p')).append($('ul')); 
$('h2').after(div); 

Answer 3

您可以使用jQuery wrapAll功能。

$("p").next().andSelf().wrapAll('<div id="test" />'); 

這裏是一個小提琴http://jsfiddle.net/uba87of5/

Answer 4

股利將被放置在內容後，H2和結束後或者在下一H2

$('h2').nextUntil('h2').wrapAll('<div id="test"></div>'); 

http://jsfiddle.net/ew9hzfu2/2/

Answer 5

似乎年初是，你想要做的是這樣的：$('#test').append($('p,ul'))
jsfiddle here

這將移動
<p>test</p> and <ul><li>testlijst</li></ul>
到
<div id="test"></div>