title: Inserting elements into the DOM in a jQuery Mobile based page
body: <p>I'm experimenting with a jQuery Mobile app that will eventually end up as a non-Web app on a mobile device and so all the content has to be local. For that reason (I think) I need to construct the app in a single page delineated by <code>data-role="page"</code> tags otherwise the ajax loading mechanism in jQuery Mobile doesn't seem to work.</p>
  
  <p>The app will read data from a local storage DB and display it on the page in an unordered list, styled using jQuery Mobile to look like a native app. </p>
  
  <p>In my <code>$(document).ready()</code> function I execute the DB lookup and for each results, I create an <code>&lt;li&gt;</code> tag around my DB results and then call <code>$(".list").append(li_str);</code> where <code>.list</code> is the class of my <code>&lt;ul&gt;</code> tag.</p>
  
  <p>The page renders as if jQuery Mobile isn't present - I see the correct data in each <code>&lt;li&gt;</code> but it doesn't look correct. </p>
  
  <p>Comparing this result with a version where I hard code the <code>&lt;li&gt;</code> tags in the page HTML - it looks like jQuery Mobile modifies the tags and inserts a lot of new classes etc. </p>
  
  <p>Maybe I need to build the page from the DB earlier in the page load cycle? Any suggestions?</p>