JQuery Mobile add <div> using .append - jquery-mobile

Question

I'm trying to add <div><ul><li> using the .append method. Not having any luck!
<div data-role="page" data-theme="b" id="calendar" data-add-back-btn="true">
<div data-role="content" data-theme="b" id="myBlank">
<!-- CONTENT -->
</div>
<div data-role="header">
<h1>-CALENDAR-</h1>
<a class="ui-btn-right" id="infoButton" onclick="getMyCalendar();">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="calToday">
<!-- CONTENT -->
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
Problem is in the following?
$('#calendar').append('<div data-role="content" id="month"><ul data-role="listview"><li>HI</li></ul></div>');
UPDATE:
here is my code, the problem is where to init the page again since it's populating prior to page load :
$.post(jaction, { device: "stdbrowser", action: "doLogin", j_username: xuser, j_password: xpwd, j_accessCode: xcode, j_host: jaction }, function(data) {
var jsessionid = sessionStorage.jsid;
var prefix = sessionStorage.jsid_prefix;
var doAction = "https://" + prefix + ".domain.net/servlet/ServletController;jsessionid=" + jsessionid + "?action=" + action;
$.get(doAction, function(data) {
var iDivFormat = formatCalendar(data);
$('#calendar').append('<div data-role="content" id="month"><ul data-role="listview"><li>HI</li></ul></div>').children().last().trigger("create");
$('#month').html(iDivFormat).trigger("pagecreate");;
$('#calendar #progress').remove();

Answer 1

If you want your list to be look like a jQuery Mobile list-view, you'll need to initialize it:
$('#calendar').append('<div data-role="content" id="month"><ul data-role="listview"><li>HI</li></ul></div>').children().last().trigger("create");
This code initializes the new data-role=[content] element, which in turn initializes the list-view widget nested within.
Here's a demo: http://jsfiddle.net/wtTn6/1/