jquery-mobile css not applied on html generated with javascript

jquery-mobile css not applied on html generated with javascript

I am getting data from a JSON file and then I display it with an html
structure following the jquerymobile structure with data-role, etc...here
is my code on how I get the data and display it:
$(document).on('pageinit', function(){
$.getJSON("http://danielvivancos.com/edu/wordpress/?json=get_posts&post_type=product",
function(data){
var html = "";
$.each(data.posts, function(index, d){
html = html + "<li><a href='" + d.slug + "'
data-transition='slidedown'><img src='" +
d.thumbnail_images.thumbnail.url + "' /><h3 class='ui-li-heading'>
Menu" + index + "</h3></a></li>";
});
html= "<ul data-role='listview' data-inset='true'>"+ html + "</ul>";
$(html).appendTo(".choice_list");
}).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
/* alert(jqXHR.responseText) */
alert("error occurred!");
});
});
The output in HTML is as follws:
<li><a href="link1.HTML" data-transition="slidedown"> <img
src="source1"><h3> Menu1</h3></a></li>
<li><a href="link2.HTML" data-transition="slidedown"> <img
src="source2"><h3> Menu2</h3></a></li>
<li><a href="link3.HTML" data-transition="slidedown"> <img
src="source3"><h3> Menu3</h3></a></li>
But my problem is that even though I display the content the way
jquerymobile says, the style which should be applied is not. I mean all
the classes added by jquerymobile script are not added to my html
generated with javascript. Anyone kowns how can I fix it? How can I keep
the styles from jquerymobile? Thank you so much in advanced!
ANSWER:
$(html).appendTo(".choice_list").listview();