title: making a list in jquery mobile using innerhtml
body: <p>I am trying to create a list using the styles provided by jquery mobile. When I make the list in the html file, the list incorporates the styles that jquery mobile provide:     <a href="http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html" rel="nofollow">http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html</a></p>
  
  <p>However in my website, i need to generate the list based on the number of objects in my array so I want to do this by making the html script using javascript and changing the innerHTML of a div. When I do this, a normal list appears without the stylings of jquery mobile. </p>
  
  <p>Does anyone have a solution to my problem?</p>
  
  <p>Here's my markup code: </p>
  
  <pre><code>function GenerateList(appArray) {
      var searchList = document.getElementById('searchList');
      var app;
      var htmlString = "&lt;ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'&gt;";
  
      for(i=0; i&lt;appArray.length;i++) {
          app = appArray[i];
          htmlString = htmlString + "&lt;li&gt;&lt;a id=App" + (i+1).toString() + " onclick='AppSelected(id);'&gt;";
          htmlString = htmlString + "&lt;img src='DummyImages/" + app[1] + "' alt='Logo' class='ListAppLogo'&gt;";
          htmlString = htmlString + "&lt;h3&gt;"+ app[2] + "&lt;/h3&gt;";
          htmlString = htmlString + "&lt;p&gt;" + app[4] + ".0/5.0&lt;/p&gt;";
          htmlString = htmlString + "&lt;input type='hidden'&gt;" + app[0] + "&lt;/a&gt;&lt;/li&gt;";
      }
  
      htmlString = htmlString + "&lt;/ul&gt;";
      searchList.innerHTML = htmlString;
  }
  </code></pre>