Добавить div после элемента и завершить div после содержимого

Question

У меня есть h2 a ul и абзац. Я хочу добавить div после h2, который работает, но я хочу, чтобы 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>