Jquery insertAfter html要素リファクタ

Question

私の脳は長い一日の後に揚げられ、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; 
    }); 

Answer 1

実は、あなただけの変数に文字列としてテーブル全体を入れて、中にそれを置くために1 insertAfter();を使用することができますDOM。

安価なパフォーマンスではないので、できるだけこれらの呼び出しを少なくすることをお勧めします（append()、prepend()、insertAfter()など）。 HTMLドキュメント内の

Answer 2

置き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(); 
});