AJAX/HTMLで成功を表示するためのベストプラクティス

Question

私はすべてのユーザー情報を取得し、displayUser関数に渡すAjax関数を持っています。 displayUser関数では、ID = displayUsersのテーブルにそれを表示します。これはうまくいきます。しかし、今私は、これに多くのhtmlコードを追加したい、汚れたコードにすることなく。誰かがこれに対して良い練習をしていますか？

<script> 
    $(function() { 
     $.ajax({ 
      type: 'GET', 
      url: '?page=getUserInfo', 
      dataType: 'json', 
      success: function(data) { 

       $.each(data, function(i, item){ 
        displayUsers(item); 
      }); 
      } 
     }); 
    }); 
    </script> 

    <script> 
     function displayUsers(item) { 
      var $displayUsers = $('#displayUsers'); 
      $displayUsers.append('<tr><th>navn:</th><td>' + item.name + '</td><th>Brukernav:</th><td>' + item.username + '</td></tr>'); 

     } 
    </script> 

Answer 1

私には2つの考えがあります。 1あなたが何をやっているのか、2つは私が示唆できること（議論ではes2015ももたらします）。

要素を作成して追加しています。これは実際には良い習慣であり、文書の再塗りつぶしが少なくなるため、パフォーマンスが向上します。このアイデアは、document.createElementのようなものを使って拡張することができます。 3つの要素を作成し、それらを1つずつ親要素に追加することができます。最初は悪い探し方のコードでラベル付けすることもできますが、うまく動作し、良いコードです。

複数行テンプレートをサポートするes2015テンプレートを調べることもできます。ブラウザはそれをサポートしていますが、es2015を導入したいのかどうかはわかりません。