insert in the html using jQuery?

Answer 1

var thead = $("<thead>");
$('.GridHeader').wrapAll(thead);

http://api.jquery.com/wrapAll

Answer 2

This can be a little tricky, because some browsers will wrap your <tr> elements in a <tbody> by default if you don't include one yourself. Firefox 19 and Chrome 26 do this. IE 10 does not. Only doing a wrapAll will result in the following invalid HTML:

<table class="Grid">
    <tbody>
        <thead>
            <tr class="GridHeader">
                <th>BU</th><th>Function</th>
            </tr>
            <tr class="GridHeader">
                <th>&nbsp;</th><th>&nbsp;</th>
            </tr>
        </thead>
    </tbody>
</table>

You can see this behavior for yourself using this jsFiddle if you compare the original markup, the markup after clicking Wrap, and the markup after clicking Prepend.

To overcome this, as the jsfiddle shows, you need to also remove the newly added <thead> and prepend it back to the <table>:

$('.GridHeader').wrapAll('<thead>');
$('.Grid thead').remove().prependTo('.Grid');