Retaining elements while using .replaceWith()

Question

I've struggled with this so any help is welcome. I have created a toggle between a grid(divs) and a table using the jquery replaceWith function. This works great, but my issue lies with keeping each element's specific link constant through each click.

In the attached example, I've added the item to the replaceWith function, but it renders outside the desired elements. For example, I want the link to remain in the TR or Div it initially resides in. When it renders, the links render outside the Table/Div elements.

Example:

<table class="toggle" style="display: table;">
    <tbody>
    <tr class="table-head">  <--- LINK SHOULD BE 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 this well enough for someone to 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 three 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();
});
});

Answer 1

I'm not sure if I understood your question, but if you want to insert a link as table-head first child, you could use the "Prepend" function:

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

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

and the 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>