Modify an Dom element using jquery?
<p>HI all i have an html which needs to be modified..this is my html</p>

<pre><code>        &lt;div class="navbar navbar-inverse"&gt;
&lt;div class="navbar-inner"&gt;
    &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;div class="nav-collapse collapse"&gt;
        &lt;ul class="nav-pills SC-Topmenu nav"&gt;


            &lt;div class="top-nav "&gt;
                &lt;div class="title-bar"&gt;
                    &lt;div data-original-title="Doubleclick for edit" class="title username editable editable-click" data-type="text" data-pk="" data-url="/post" rel="tooltip" data-placement="bottom"&gt;Home&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="panel"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div style="display: inline-block;" class="top-nav"&gt;
                &lt;div class="title-bar"&gt;
                    &lt;div style="display: block;" data-original-title="Doubleclick for edit" class="title username editable editable-click editable-unsaved" data-type="text" data-pk="" data-url="/post" rel="tooltip" data-placement="bottom"&gt;Categorys&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="panel"&gt;&lt;/div&gt;
                &lt;div style="display: table-cell;" class="jstree jstree-8 jstree-2"&gt;
                    &lt;ul&gt;
                        &lt;li id="Li7" class="Root jstree-last jstree-open"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0)" class="Titleanchor"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;Title1&lt;/a&gt;
                            &lt;ul class="MenuContentholder"&gt;
                            &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;2&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div style="display: table-cell;" class="jstree jstree-10 jstree-focused jstree-4"&gt;
                     &lt;ul&gt;
                        &lt;li id="Li6" class="Root jstree-last jstree-open"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0)" class="Titleanchor"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;Title2&lt;/a&gt;
                            &lt;ul class="MenuContentholder"&gt;
                            &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;2&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div style="display: table-cell;" class="jstree jstree-7 jstree-1"&gt;
                    &lt;ul&gt;
                        &lt;li id="Li5" class="Root jstree-last jstree-open"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0)" class="Titleanchor"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;Title3&lt;/a&gt;
                            &lt;ul class="MenuContentholder"&gt;
                            &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;2&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div style="display: table-cell;" class="jstree jstree-9 jstree-3"&gt;
                    &lt;ul&gt;
                        &lt;li id="Li4" class="Root jstree-last jstree-open"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0)" class="Titleanchor"&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;Title4&lt;/a&gt;
                            &lt;ul class="MenuContentholder"&gt;
                            &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a&gt;&lt;ins class="jstree-icon"&gt;&amp;nbsp;&lt;/ins&gt;2&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>the above html should be converted like this</p>

<pre><code>         &lt;div class="navbar navbar-inverse"&gt;
    &lt;div class="navbar-inner"&gt;
        &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;div class="nav-collapse collapse"&gt;
            &lt;ul class="nav-pills SC-Topmenu nav"&gt;
                &lt;li&gt;&lt;a href="Index.html"&gt;Home &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="Index.html"&gt;Categorys &lt;/a&gt;
                    &lt;div&gt;
                        &lt;ul&gt;
                            &lt;h3&gt;Title1&lt;/h3&gt;
                             &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;

                        &lt;/ul&gt;
                         &lt;ul&gt;
                            &lt;h3&gt;Title2&lt;/h3&gt;
                             &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;

                        &lt;/ul&gt;
                         &lt;ul&gt;
                            &lt;h3&gt;Title3&lt;/h3&gt;
                             &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;

                        &lt;/ul&gt;
                         &lt;ul&gt;
                            &lt;h3&gt;Title4&lt;/h3&gt;
                             &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;

                        &lt;/ul&gt;
                         &lt;ul&gt;
                            &lt;h3&gt;Title5&lt;/h3&gt;
                             &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;

                        &lt;/ul&gt;

                    &lt;/div&gt;


                &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>all the attributes all the elements should be removed  so far i had been trying this but i am not bale to get the completed out put there are some isssues can any one help me here</p>

<pre><code>   $('.top-nav').each(function () {
        var container = $(this);
        //$(container).find('.custom-content').each(function () { var custom_content = $('.custom-content').html(); $(container).find('.MenuContentholder').append('&lt;li&gt;&lt;a href="javascript:void(0)"&gt;' + custom_content + '&lt;/a&gt;&lt;/li&gt;'); });
        $(container).find('.jstree-icon').addClass('icon');
        $(container).wrap('&lt;div&gt;&lt;/div&gt;')
        $(container).wrap('&lt;li&gt;&lt;/li&gt;');
        $(container).find('.title').wrap('&lt;a href="#" class="SC-Title"&gt;&lt;a&gt;');
        //$(container).find('.widget-controls').remove();
        $(container).find('.SC-Title').html($(container).find('.SC-Title').children().html());
        $(container).find('.Root').parent('ul').unwrap();
        $(container).find('.SC-Title').unwrap();
        //$(container).find('ul').parent('div').children('ul').unwrap();

        //$('.panel').remove();
        alert($('.' + Areaclassselector).html());
        $('.Titleanchor').each(function () {            
            $(this).html('&lt;h3&gt;' + $(this).html() + '&lt;/h3&gt;');
            $(this).find('h3').unwrap();
        });
        $(container).find('ins').remove();

    });
</code></pre>
