jquery - 使用jQuery插入html？

Question

如何插入<thead>和<\thead>使用 jQuery？

     <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>元素包装在 a 中。<tbody>Firefox 19 和 Chrome 26 做到了这一点。IE 10 没有。仅执行 awrapAll将导致以下无效 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');