javascript - Dynamically creating JQuery Mobile page from object -

i know it's possible create jquery mobile page dynamically writing out long string , appending page container. want create page object , append page container.

this how used create pages: http://jsfiddle.net/pjucn/

var page = $("<div data-role='page' id='page'><div data-role=header> <a data-iconpos='left' data-icon='back' href='#' data-role='button'  data-rel='back'>back</a><h1>dynamic page</h1></div> <div data-role=content>stuff here</div></div>");  page.appendto($.mobile.pagecontainer);  $.mobile.changepage('#page'); 

this how want create them: http://jsfiddle.net/8nzmw/2/

var page = $('<div/>'),      header = $('<div/>'),      = $('<a/>'),      title = $('<h1/>'),      content = $('<div/>');  page.data('role', 'page'); page.attr('id', 'page');  header.data('role', 'header');  back.data('iconpos', 'left'); back.data('icon', 'back'); back.data('role', 'button'); back.data('rel', 'back'); back.attr('href', '#'); back.text('back');  title.text('dynamic page');  header.append(back); header.append(title);  page.append(header);  content.data('role', 'content'); content.text('stuff here');  page.append(content);  page.appendto($.mobile.pagecontainer);  $.mobile.changepage('#page'); 

i have no problem creating other simple jquery mobile elements, this, can't figure out how create whole page way. tried calling .trigger("create") on page object, still didn't trick.

any appreciated, thanks!

here ya go, works me (notice commented out code make work) -

var page = $('<div/>'),     header = $('<div/>'),     = $('<a/>'),     title = $('<h1/>'),     content = $('<div/>');  //page.data('role', 'page'); page.attr('data-role', 'page'); page.attr('id', 'page');  //header.data('role', 'header'); header.attr('data-role', 'header');  back.data('iconpos', 'left'); back.data('icon', 'back'); back.data('role', 'button'); back.data('rel', 'back'); back.attr('href', '#'); back.text('back');  title.text('dynamic page');  header.append(back); header.append(title);  page.append(header);  //content.data('role', 'content'); content.attr('data-role', 'content'); content.text('stuff here');  page.append(content);  page.appendto($.mobile.pagecontainer);  $.mobile.changepage('#page'); 

here jsfiddle demo