jqueryでコンテンツを追加する

Question

ajaxからサーバコードに返されたアプリケーション層のエラーを表示するために、エラー通知html/css pane/divを添付しているとします。私たちは、サーバからのJSONレスポンスペイロードのエラーの有無のブランチと、次の操作を行います。

$('#message').remove(); 
$('body').append('<div id="message" style="display: none;"><a href="" id="message-close">Close</a></div>'); 
$('#message-close').before(data['message'] + '<ul id="errors"><li>' + data['errors'].join('</li><li>') + '</li></ul>'); 
$('#message').addClass('error').fadeIn(); 

これはうまく動作しますが、人々は（基本またはよりエレガントにするために）改善点を指摘することができれば、私は感謝を私が逃した可能性のあるjquery側の欠陥。たとえば、htmlフラグメントをjqueryに散在させることは残念だと考えられます。ちなみに＃message-closeのクリックハンドラは別の場所（成功ブランチと同様に）で定義されています。これは編集された例です。この質問がstackoverflowの代わりにコードレビューサイトに属している場合は、教えてください。私は前者を使用していないが、それが存在することを認識している。

Answer 1

この解決方法は間違いなく簡潔ですが、プログラムアプローチは、例外とコーナーケース（必然的に発生する）を処理するのに適しています。

appendを入力してbeforeなどを使用すると、より簡単に読むことができます。これはボトムアップから構築され、必要に応じてデータとイベントハンドラをネストします。

$(function() { 

    // simulate ajax call 
    setTimeout(function() { 

     // ajax datas 
     var data = {errors: ['one', 'two', 'three']}; 

     // close handler 
     var closeMessage = function() { 
      $(this).parents("div").fadeOut(); 
      return false; 
     }; 

     // render dialog 
     $('<div id="message" style="display: none;"></div>').append(
      $('<ul id="errors"/>').append(
       $.map(data.errors, function(t) { 
        return $("<li/>").text("an error: "+t)[0]; 
       }))) 
      .append(
       $('<a href="#close" id="message-close">Close</a>') 
        .click(closeMessage)) 
      .appendTo("body") 
      .fadeIn(); 

    }, 1000); 

}); 

See it working here on jsFiddle