javascript - Retaining elements while using .replaceWith() -

i've struggled welcome. have created toggle between grid(divs) , table using jquery replacewith function. works great, issue lies keeping each element's specific link constant through each click.

in attached example, i've added item replacewith function, renders outside desired elements. example, want link remain in tr or div resides in. when renders, links render outside table/div elements.

example:

<table class="toggle" style="display: table;">     <tbody>     <tr class="table-head">  <--- link should here --->  <th>title</th><th>date</th><th>info</th></tr><tr><td>class title</td><td>item details</td><td>item details</td></tr>     </tbody> </table>  

hopefully i've described enough answer.

http://jsfiddle.net/rymill2/r3j5m/

js:

$btntable = ".button-table"; $btngrid = ".button-grid"; $table = "table.toggle"; $grid = ".grid"; $link = "a.grid-link";  if ($($table).length > 0) {         $($btntable).addclass('active'); } else {     $($btntable).removeclass('active'); } if ($($grid).length > 0) {     $($btngrid).addclass('active'); } else {     $($btngrid).removeclass('active'); }  $($btntable).click(function() { $(this).addclass('active'); $($btngrid).removeclass('active'); $($grid).replacewith(function() {     var html = '';      $('div:first', this).each(function() {         html += '<tr class="table-head">';         $('div', this).each(function() {             html += '<th>' + $(this).html() + '</th>';         });         html += '</tr>';     });      $('div:not(:first)', this).each(function() {         var innerhtml = '';         var innerlink = '';         $($link, this).each(function() {             var href = $(this).attr('href');             var id = $(this).attr('id');             innerlink += '<a class="grid-link" href="'+ href +'" id="'+ id +'"></a>';             });          $('div', this).each(function() {             innerhtml += '<td>' + $(this).html() + '</td>';         });         if (innerhtml != '') {                     html += '<tr>'+ innerlink + innerhtml +'</tr>';         }     });     return $('<table class="toggle">' + html + '</table>').fadein();  }); });  $($btngrid).click(function() { $(this).addclass('active'); $($btntable).removeclass('active');  $($table).replacewith(function() {     var html = '';     $('tr', this).each(function() {         html += '<div class="result 3 columns h-100">';         $('th', this).each(function() {             html += '<div>' + $(this).html() + '</div>';         });         $('td:first', this).each(function() {             html += '<div class="grid-title">' + $(this).html() + '</div>';         });             $('td:not(:first)', this).each(function() {             html += '<div class="grid-row">' + $(this).html() + '</div>';         });         html += '</div>';          $($link, this).each(function() {             var href = $(this).attr('href');             var id = $(this).attr('id');             html += '<a class="grid-link" href="'+ href +'" id="'+ id +'"></a>';             });     });      return $('<div class="grid">' + html + '</div>').fadein(); }); }); 

i'm not sure if understood question, if want insert link table-head first child, use "prepend" function:

http://api.jquery.com/prepend/

$('.table-head').prepend('<a href="#">your link</a>'); 

and result:

<table class="toggle" style="display: table;">     <tbody>     <tr class="table-head">  <a href="#">your link</a>  <th>title</th><th>date</th><th>info</th></tr><tr><td>class title</td><td>item details</td><td>item details</td></tr>     </tbody> </table>