add dynamically data-role pages

I want add dynamically data-role pages in my phonegap application. I thought that I can do this with something like this but isn't working

jQuery(function()
{     
    var theList = jQuery('#results');      
    for(i=0; i<mytool_array.length; i++)     
    {           
      开发者_开发百科  content = '<div data-role="page" id="page'+i+'"><div data-role="header" data-backbtn="false"></div><div data-role="content"><p>page=+'+i+'</p></div></div>'; 
        theList.append(content);    
    }   
})

Im my HTML:
<div id="results"></div>

---

As far as I can predict the problems are:

1. you shouldn't put pages in a div. they should be in body
2. your function starts at DOMready, so it is after (or partially during) jquery mobile makes its formatting
3. rethink your idea. putting basic html structure in body and filling them later should work better
4. Consider making it a list or a set of collapsibles instead of pages.

This said, your current code should look like this:

jQuery(function($)
{     
    var b = $('body');      
    for(i=0; i<mytool_array.length; i++)     
    {           
        $('<div data-role="page" id="page'+i+'"><div data-role="header" data-backbtn="false"></div><div data-role="content"><p>page=+'+i+'</p></div></div>') //newline added for readability. it shouldn't be here
        .appendTo(b).page();    //newline added for readability
    }   
});