javascript - jQuery - move an element to another location in the html -

how can move divs class collapse location jquery? want move them inside tds right after trs.

i want change following:

<tbody>     <tr class="">         <td class="rozwin">             <div class="collapse" id="collapseexample-2"> // original setting div             </div>         </td>         <td class="mrkporadalp">2</td>     </tr>      <tr class="">         <td class="rozwin">             <div class="collapse" id="collapseexample-1">  // original setting div             </div>         </td>         <td class="mrkporadalp">3</td>     </tr> </tbody> 

to this:

<tbody>     <tr class="">         <td class="rozwin"></td>         <td class="mrkporadalp">2</td>     </tr>     <div class="collapse" id="collapseexample-2"> // move location     </div>      <tr class="">         <td class="rozwin"></td>         <td class="mrkporadalp">3</td>     </tr>     <div class="collapse" id="collapseexample-1">  // move location     </div> </tbody> 

this trick:

$('.collapse').each(function(){     $(this).insertafter($(this).parents('tr')); }); 

example jsfiddle

edit

here code comment preserve valid html:

$('.collapse').each(function(index){      $('<tr><td id="collapse_' + index + '" colspan="2">').insertafter($(this).parents('tr'));     $(this).appendto('#collapse_' + index); }); 

example jsfiddle