Create new div based in others

Question

I have the following code

<div class="tabbable">
        <ul class="nav nav-tabs" id="myTab"></ul>
        <div class="tab-content">
             <div id="rede" class="tab-pane fade in active">
             <div id="produto" class="tab-pane fade">
       </div>
</div>

I need separate div "rede" and "produto" in new divs, for example:

<div class="tabbable">
            <ul class="nav nav-tabs" id="myTab"></ul>
            <div class="tab-content">
                 <div id="rede" class="tab-pane fade in active">
           </div>
    </div>
<div class="tabbable">
        <ul class="nav nav-tabs" id="myTab"></ul>
        <div class="tab-content">
             <div id="produto" class="tab-pane fade">
       </div>
</div>

I need separate using javascript, jquery.

Answer 1

I got it. $(selector).find(".tabbable").parent().replaceWith(newContent);