title: Dynamically populating <li> within jQuery Mobile data-role=listview
body: <p>While using jQuery Mobile <code>&lt;ul data-role="listview"&gt;</code>, I am trying to add some <code>&lt;li&gt;</code>s from JavaScript, but the new <code>&lt;li&gt;</code> is not inheriting the jQuery Mobile styles. Here is the code:</p>
  
  <pre><code>&lt;head&gt;
    &lt;script&gt;
      function init()
      {
        msg = "&lt;li&gt; &lt;a href=&gt; New List Item &lt;/a&gt;&lt;/li&gt;";
        document.querySelector('#add_item').innerHTML +=  msg;
      }
  
      // call init on load
      window.addEventListener('load',init,false);
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id='main' data-role='page' data-theme='c'&gt;
      &lt;div data-role='header'&gt;
        &lt;h1&gt;Welcome!&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id='content' data-role='content'&gt;
        &lt;ul data-role="listview" id="list_cars"&gt;
          &lt;div id="add_item"&gt;
          &lt;/div&gt;
  
          &lt;li&gt; &lt;a href=""&gt; List Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt; List Item 1&lt;/a&gt;&lt;/li&gt;      
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div data-role='footer'&gt;
        &lt;h4&gt;Enjoy reading the book ...&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;  &lt;!-- End of Min page --&gt;
  &lt;/body&gt;
  </code></pre>