title: List View HTML Static vs Dynamic
body: <p>I'm trying to dynamically create HTML lists using some random JSON data
  The code is -</p>
  
  <pre><code> &lt;div data-role="page" id="pageone"&gt;
       &lt;div data-role="header"&gt;
        &lt;h1&gt;Lists&lt;/h1&gt;
       &lt;/div&gt;
       &lt;div data-role="main" class="ui-content"&gt;
        &lt;h2&gt;AJAX List View&lt;/h2&gt;
        &lt;div id='list'&gt;&lt;/div&gt;
       &lt;/div&gt;
        &lt;script type="text/javascript"&gt;
            var str;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                 str = xmlhttp.responseText;
                 str = JSON.parse(str);
                 var q = "";
                 for(i=0;i&lt;str.length;i++) {
                  q += "&lt;div data-role='collapsible' data-inset='false'&gt;&lt;h4&gt;" + str[i].title + "&lt;/h4&gt;";
                  q += "&lt;ul data-role='listview' data-inset='true'&gt;&lt;li&gt;Details: " + str[i].duration + "&lt;/li&gt;&lt;li&gt;Price: " + str[i].price + "&lt;/li&gt;&lt;/ul&gt;";
                  q += "&lt;/div&gt;";
                 }
                 document.getElementById('list').innerHTML = q;
             }
            };
            xmlhttp.open("GET", "http://phonegappro.esy.es/test/json.php", true);
            xmlhttp.send();    
         &lt;/script&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>When I run this code it views something like this - 
  <a href="https://i.stack.imgur.com/PsNfC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PsNfC.jpg" alt="enter image description here"></a></p>
  
  <p>But when I try to do the above in a static manner by writing every UL &amp; OL it runs as I need.</p>
  
  <p><a href="https://i.stack.imgur.com/g9zXc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g9zXc.jpg" alt="enter image description here"></a></p>
  
  <p>Header Libs - </p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  </code></pre>