Estoy usando jQuery mobile y actualmente construyo un menú sobre la marcha usando el código a continuación. Ahora necesito crear páginas reales para los elementos del menú como mi próximo paso. He estado mirando jQuery Mobile yGeneración dinámica de páginas y creo que esto es algo que 'podría' usar para lograr esto. He leído los documentos de Dynamic Page Generation y no entiendo cómo podría encajar esto en mi código actual o incluso si es lo correcto para lo que necesito lograr.

Puede ver más abajo. Ya tengo el ID y el nombre de la página, etc. cuando compilo la salida de mi menú para la página de inicio, ¿podría alguien mostrarme un ejemplo de cómo construyo dinámicamente las páginas html necesarias usando jquery para estos elementos de menú? Gracias.

$.each(siteData["pages"], function(i,v) {
             $.mobile.activePage.find('[data-role=content]').append('' +
                     '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');

            // NOW I HAVE THE MENU LETS CREATE THE ACTUAL PAGES INSIDE HERE TOO
         });

Elementos del menú de marcado actual creados dentro de navlist:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
    </div>

    <div data-role="content" class="navlist">
    </div>

    <div data-role="footer">
    </div><!-- /footer -->
</div>

Así que ahora, para cada elemento necesito generar el marcado para cada elemento usando jquery.

ACTUALIZACIÓN: basado en una sugerencia, probé algo como esto, pero no funciona.

 $.each(siteData["pages"], function(i,v) {
     $.mobile.activePage.find('[data-role=content]').append('' +
             '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');



     // Prepare your page structure
     var newPage = $("<div data-role='page' id=v[id]><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>");

    // Append the new page info pageContainer
                 newPage.appendTo($.mobile.pageContainer);

    // Move to this page by ID '#page'
                 $.mobile.changePage('#'+v["id"]);


 });