jQuery create tabbed content problem

The开发者_运维百科 idea is to rewrite original HTML (on the fly) and create tabbed content instead. So let's say we have something like:

<div id="tabber">
<h1>Tab one</h1>
...HTML text 1...
<h1>Tab two</h1>
...HTML text 2...
<h1>Tab three</h1>
...HTML text 3...
</div>

The above code should end up in form like:

<div id="tabber">
<ul>
<li class="tabbertab">Tab one</li>
<li class="tabbertab">Tab two</li>
<li class="tabbertab">Tab three</li>
</ul>
<div class="tabberdiv">...HTML text 1...</div>
<div class="tabberdiv">...HTML text 2...</div>
<div class="tabberdiv">...HTML text 3...</div>
</div>

So I've tried to use something like this to kinda turn all of H1 to tab labels and the content between next H1 to tab content:

var menu_items = [];
var all_content = jQuery( '#tabber' ).html();
jQuery( all_content )
    .filter( 'h1' )
    .each( function() {
        menu_items.push( {
            title: jQuery( this ).text(),
            contents: jQuery( this ).nextUntil( 'h1' ).map( function() {
                return jQuery( this ).html();
            } ).get()
        } );
    } );

...more code will actually split objects saved in menu_items array and create clickable tabs that are supposed to show (hide) corresponding content.

The problem is that all of "major" HTML tags are stripped from tabberdiv DIV content. For example, H2, TABLE, UL, P, DIV ... none of it exist if used. However, A, LI, TR, TD are still there.

I was wondering what could be wrong with above chunk of jQuery code, which function causes disappearing HTML elements.

Thanks in advance!

========== A little bit later ==========

For some reason html() function is stripping down all of parent nodes. I'm not a jQuery expert and I guess there must be a reason for that. Either way, a simple workaround would be the following:

jQuery( all_content )
    .filter( 'h1' )
    .each( function() {
        menu_items.push( {
            title: jQuery( this ).text(),
            contents: jQuery( this ).nextUntil( 'h1' ).map( function() {
                return '<' + this.nodeName.toLowerCase() + '>' + jQuery( this ).html() + '</' + this.nodeName.toLowerCase() + '>';
            } ).get()
        } );
} );