在jQuery中为json数组生成html的标准方法

Question

i am trying to generate html for the json returned array of users.. I want to do it the following way but I don't feel this is very effecient way to do this job. please review the following code and tell me whether i sould use some templated code or is there any standard for this scenario?

                  success: function(e){
       console.log(e);
       console.log(e.d[0].UserName);

       var position2= $("#searchtextbox").position();
       $('<div/>',
        {
          id:'generatedsearchdiv', 
          css:{
              position:'absolute',
              left:position2.left, 
              top:position2.top+20
              }

         }).appendTo('#searchArea');

       for (var i=0; i<=e.d.length; i++)
       {
       $('<div/>', 
            {

            html:"<span>"+e.d[i].UserName+"<span>"
            }).appendTo('#generatedsearchdiv');

       }

       } 

Answer 1

您可以为此使用Jquery模板。

Answer 2

This method is "okay" for small bits of HTML, like <span>{data}</span> . However, if you have much more than that, it really is best for maintainability to use a templating solution. Check out this answer for options.

Answer 3

I have not been sold on the current templating solutions. If you aren't either, you can get a quick string formatter if you put this code inline:

String.prototype.format = function() {
    var pattern = /\{\d+\}/g;
    var args = arguments;
    return this.replace(pattern, function(capture) {return args[capture.match(/\d+/)]; });
}

You can define formatting strings like so:

var formatHTML = '<span>{0}</span>';

Then use it something like this:

$('#generatedsearchdiv').append(formatHTML.format(e.d[i].UserName));