Jquery insertAfter html元素重构

在漫长的一天之后，我的大脑被炸了，这个周末我接到了一个任务，就是使用jquery在我们的UI中插入一个表

我有一些大的丑陋的代码行插入html元素。。。我想看看是否有一种简单的方法可以让它更干净。我知道我可以把它分成几行，但必须有一个最佳实践：

    $('#submitNewTiers').bind('click',function (e) {

    $('<div class="tiersTables"><span><a href="" rel="#overlay">Edit Tiers </a></span><table class="visible" id="newTiersTable"><thead&gr;<tr><th>Range</th><th>List Price</th><th>Quote Price</th><th class="lastTh">Approval?</th></tr></thead></table></div>').insertAfter('div.tiersTables');
    $('<tbody><tr><td>HERE</td><td></td><td></td><td></td></tr></tbody>').insertAfter('#newTiersTable thead');
        return false;
    });

$（'submitNewTiers'）.bind（'click'，函数（e）{
$（'实际上，您可以将整个表作为字符串放入变量中，然后使用1
insertAfter（）；
将其放入DOM中

我认为使用尽可能少的调用是明智的（
append（）
，
prepend（）
，
insertAfter（）
等等），因为它们在性能方面并不便宜。
将HTML代码放在HTML文档中：

<div class="tiersTables">
    <span>
        <a href="" rel="#overlay">Edit Tiers </a>
    </span>
    <table class="visible" id="newTiersTable">
        <thead>
            <tr>
                <th>Range</th>
                <th>List Price</th>
                <th>Quote Price</th>
                <th class="lastTh">Approval?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HERE</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

然后，单击，显示它：

$('#submitNewTiers')click(function() {
    $('.tiersTables').show();
});

我感谢你的建议，因为我将不得不在TDs中添加动态值，这将需要进一步调用。但是，如果有附加值，我可以始终使用$。每个。如果我只添加一个表，我喜欢这个答案，但是我需要能够增加我显示的表的数量。因此，根据你的建议，我必须“删除多个html表并隐藏它们，然后单击显示最近的表。@Robert我的建议是：从一开始就有一个隐藏表（硬编码到html源代码中）。然后，每当需要新表时，克隆它并将克隆附加到DOM中（在所需位置）。jQuery有一个方便的方法可用于此目的。”。
$('#submitNewTiers')click(function() {
    $('.tiersTables').show();
});