php - Looking for better ways to style JSON object data retrieved using AJAX -

i'm using ajax in website json string generated php script. json object looks like:

{   "people" : [     { "name" : "bob", "id" : "1", "sex" : "m" },      { "name" : "amy", "id" : "2", "sex" : "f" }   ] } 

once retrieve using ajax, i'm styling manually using javascript

for(i = 0; < obj.people.length; i++) {   document.getelementbyid('people-container').innerhtml += '<span class=\'' + obj.people[i].sex + ' person\'>' + obj.people[i].name + '</span> } 

but can't have feeling of guilt having html , classes embedded in javascript, since i'm using smarty template engine other, non-ajax content.

i figured can't use smarty ajax responses since template engine runs on page load, , ajax calls done after page loads... there better way doing this?

it useful if put sample code. if i'm understanding correctly use ajax call return this:

{   "html": "<span>...${sex}.. ${name}</span>",   "people" : [     { "name" : "bob", "id" : "1", "sex" : "m" },      { "name" : "amy", "id" : "2", "sex" : "f" }   ] } 

you can use js append markup page whatever templating engine want. , can loop through returned data take advantage of template.

// don't append more once if multiple ajax calls if ( !document.getelementbyid( 'people-template' ).length ) {    // append template page   var script = document.createelement('script');   script.type = 'text/html';   script.id = "people-template";   document.body.appendchild( script );  }  for(i = 0; < obj.people.length; i++) {    // using jquery + jquery templating here example   // never used smarty hope shows idea enough   $('#people-container').innerhtml += $('#people-template').tmpl( obj );  }