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;
    });

    

解决方法

        实际上，您可以将整个表作为字符串放入变量中，并使用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>

用CSS隐藏它：

div.tiersTables { display:none; }

然后，单击以显示它：

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