jquery - jQueryを使用してhtmlに挿入しますか?

Question

jQueryを挿入<thead>して使用するにはどうすればよいですか?<\thead>

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

Answer 1

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

http://api.jquery.com/wrapAll

Answer 2

一部のブラウザーは、要素を自分で含めない場合、デフォルト<tr>で要素をラップするため、これは少し注意が必要です。<tbody>Firefox 19 と Chrome 26 はこれを行います。IE 10 にはありません。のみを実行するwrapAllと、次の無効な 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>

元のマークアップ、Wrap をクリックした後のマークアップ、および Prepend をクリックした後のマークアップを比較すると、この jsFiddleを使用してこの動作を自分で確認できます。

これを克服するには、jsfiddle<thead>が示すように、新しく追加された も削除して、先頭に追加する必要があります<table>。

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