Create only an opening div tag using jquery

Question

Okay, so I have searched this site quite a bit and I can't seem to find the answer, so I am going to ask the same question with a better reason. I am trying to use jquery to add an opening div tag. When I try to use the after I end up with . I understand that jquery does not like to natively create tags like I want. However, here is the situation:

I have a dynamic form generator that I am using to display a form. There are several headers I am using as section headers from within the form. I want to use the jquery accordion, and it wants to see a div element wrap the contents of the accordian frame, and it wants to see it directly after my . The problem is that the number of elements in between the opening and closing div tag is dynamic. So I can't just wrap something and be done with it. What I want to do is something like this:

<h3>Section 1</h3>

...Dynamic code section here

<h3>Section 2</h3>

I want to use jquery to end up with something like this:

<h3>Section 1</h3>
<div>

Dynamic code section here

</div>
<h3>Section 2</h3>
<div>

More dynamic code

</div>

I know that I can find elements that I know of (the h3 tags) and insert the html. The problem is that jquery won't let me. Apparently it doesn't trust me enough to balance things out on my own. Anyone have any ideas on how to get this to work??

Answer 1

Use .wrapAll()

$('h3').each(function(){
   $(this).nextUntil('h3').wrapAll(document.createElement('div'));
});

DEMO: http://jsfiddle.net/ph8D2/