title: jquery mobile Dynamically Injecting Pages
body: <p>I'm using jQuery mobile and currently build a menu on the fly using the code below. I now need to create actual pages for menu items as my next step. I have been looking at jQuery Mobile and <a href="http://jquerymobile.com/demos/1.2.0-pre/docs/pages/page-dynamic.html" rel="nofollow">Dynamic Page Generation</a> and think this is something I 'could' use to achieve this. I have read the Dynamic Page Generation docs and don't understand how I could fit this into my current code or even if its right for what I need to achieve.</p>
  
  <p>I you can see below I have the ID and page name etc already when I build my menu output for the home page, could someone show me an example of how I now dynamically build the html pages needed using jquery for these menu items? Thank you. </p>
  
  <pre><code>$.each(siteData["pages"], function(i,v) {
               $.mobile.activePage.find('[data-role=content]').append('' +
                       '&lt;a href='+ v["id"] + ' data-role="button"&gt;' + v["name"] + '&lt;/a&gt;').trigger('create');
  
              // NOW I HAVE THE MENU LETS CREATE THE ACTUAL PAGES INSIDE HERE TOO
           });
  </code></pre>
  
  <p>Current markup menu items created inside navlist:</p>
  
  <pre><code>&lt;div data-role="page" id="index"&gt;
      &lt;div data-theme="a" data-role="header"&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content" class="navlist"&gt;
      &lt;/div&gt;
  
      &lt;div data-role="footer"&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So now for each item I need the to generate the markup for each item using jquery.</p>
  
  <p>UPDATE: so based on suggestion I tried something like this, but it does not work.</p>
  
  <pre><code> $.each(siteData["pages"], function(i,v) {
       $.mobile.activePage.find('[data-role=content]').append('' +
               '&lt;a href='+ v["id"] + ' data-role="button"&gt;' + v["name"] + '&lt;/a&gt;').trigger('create');
  
  
  
       // Prepare your page structure
       var newPage = $("&lt;div data-role='page' id=v[id]&gt;&lt;div data-role=header&gt;" +
               "&lt;a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
               "data-rel='back'&gt;Back&lt;/a&gt;&lt;h1&gt;Dynamic Page&lt;/h1&gt;&lt;/div&gt;&lt;div data-role=content&gt;Stuff here&lt;/div&gt;&lt;/div&gt;");
  
      // Append the new page info pageContainer
                   newPage.appendTo($.mobile.pageContainer);
  
      // Move to this page by ID '#page'
                   $.mobile.changePage('#'+v["id"]);
  
  
   });
  </code></pre>