Limit of the cooperation of HTML 5 and JQueryMobile

Limit of the cooperation of HTML 5 and JQueryMobile

I can't correctly display the "select" result of my HTML 5 database : is it a limit of the cooperation of HTML v5 with JQueryMobile,
When I use HTML basic elements between these closure I can view the correct display in the "listview" HTML object :
 
  1. $(document).bind("mobileinit", function(){ // Waiting for JQueryMobile loading
      $(document).ready(function() { // Waiting for DOM loading
     $('#listviewCarnets').append(
      "<li><a id=\"carnetAffich1\" rel=\"external\" href=\"pagecarnetAffich.php\">Carnet d'espagne, 1998 - Hasta luego el camino del Espania ! - Créé le 2011-03-13</a></li>"+
      "<li><a id=\"carnetAffich2\" rel=\"external\" href=\"pagecarnetAffich.php\">Carnet de Quebec, 2011 - Ceci est premier voyage dans la Belle Province - Créé le 2011-03-14</a></li>"
     );
      });
    });






... and the HTML page :
  1. <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8" />
     <title>Carnets de voyages</title>
     <link rel="stylesheet" href="js/JQuery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
     <script type="text/javascript" src="js/test_bug.js"></script>
     <script type="text/javascript" src="js/JQuery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script>
    </head>
    <body>  









  2. <!-- pageCarnets debut -->
    <div data-role="page" data-theme="b" id="pageCarnets">
  3.    <div data-role="header" id="hdrCarnets" data-theme="b">
      <h1>Mes carnets de voyage</h1>
      </div>
     
      <div data-role="content" id="contentCarnets">
     <ul data-role="listview" id="listviewCarnets" data-inset="true" data-theme="d" data-dividertheme="b">
      <li data-role="list-divider">Actions</li>
      <li><a href="#pageCarnetCreer">Créer un carnet</a></li>
      <li data-role="list-divider">Les carnets</li>
      <!-- Remplissage via JavaScript -->
       </ul>
      </div>
     
    </div>
    <!-- pageCarnets fin -->













  4. </body>
    </html>

 

 
But when I use the data result of a locale database, the framework don't change the raw HTML injected by JavaScript in the HTML page :
  1. $(document).bind("mobileinit", function(){ 
      $(document).ready(function() { 
     try {
      if (window.openDatabase) {
       bdd = openDatabase( "carnetsDeVoyages" , "1.0", "", 2000);
       if (!bdd)
        alert("Impossible d'ouvrir la bdd. Peut être un problème de version ou alors pas assez de quota d'espace disque disponible pour ce domaine.");
       } else
        alert("Impossible d'ouvrir la base de données. Merci d'essayer avec un autre navigateur.");
     } catch(err) { }
     
     function modeleListeCarnets(bdd) {
      bdd.transaction(function(tx) {
       tx.executeSql("select id,nom,description,date_creation from carnets", [],
        function(tx, rs) {
         if (rs.rows.length) {
          rsResultat=new Array();
          for(var i=0 ; i<rs.rows.length ; i++) {
           rsResultat[rs.rows.item(i).id ] =  rs.rows.item(i).nom +" - "+rs.rows.item(i).description+" - Créé le "+rs.rows.item(i).date_creation;
          }
          $.each(rsResultat , function(id,value) {
           // debug : alert(id+" : "+value);
           if(id>0) $('#listviewCarnets').append("<li><a id=\"carnetAffich"+id+"\" rel=\"external\" href=\"pagecarnetAffich.php\" title=\""+value+"\">"+value+"</a></li>");
          });
         }                                          
        },
        function(tx, error) {
         alert("Problème d'accès aux données : " + error.message);
         return;
        }
       );
      });
     }
     modeleListeCarnets(bdd);
     
      });
    });



































Is this a strange limitation of HTML 5 ? Or is this a limitation of my programming ability (no, I can't seriously think that's the real truth) ?