title: Dynamically add elements with ajax and json breaks the page layout
body: <p>I have a page structured with jquery mobile. If i populate a list with a static code:</p>
  
  <pre><code>    &lt;script&gt;
  document.write('&lt;ul data-role="listview"&gt;');
  
  
  document.write('&lt;li data-icon="false"&gt;&lt;a href="#" id="mortadella"&gt;&lt;img src="images/app/prod.jpg"&gt;&lt;h2&gt;Sisa&lt;/h2&gt;&lt;p class="wrap"&gt;mortadella affettatagr.120&lt;/p&gt;&lt;span class="ui-li-count"&gt;2,70 €&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
  document.write('&lt;li data-icon="false"&gt;&lt;a href="#" id="mortadella"&gt;&lt;img src="images/app/prod.jpg"&gt;&lt;h2&gt;Sisa&lt;/h2&gt;&lt;p class="wrap"&gt;mortadella affettatagr.120&lt;/p&gt;&lt;span class="ui-li-count"&gt;2,70 €&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');             
  
  
  
  document.write('&lt;/ul&gt;');
  
  &lt;/script&gt;
  </code></pre>
  
  <p>i get this result: <a href="http://i.stack.imgur.com/dFNBe.png" rel="nofollow">image</a></p>
  
  <p>Now, i try to do it dinamically, reading from a database with ajax and json.
  This is the code:</p>
  
  <pre><code>&lt;script&gt;
  document.write('&lt;ul data-role="listview"&gt;');
      $.ajax({
          url: 'db_to_app_prod.php',
          dataType: 'jsonp',
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){
              $.each(data, function(i,item){ 
  
  document.write('&lt;li data-icon="false"&gt;&lt;a href="#" id="mortadella"&gt;&lt;img src="images/app/prod.jpg"&gt;&lt;h2&gt;Sisa&lt;/h2&gt;&lt;p class="wrap"&gt;mortadella affettatagr.120&lt;/p&gt;&lt;span class="ui-li-count"&gt;2,70 €&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
  
              }); 
  
          },
          error: function(){
             output.text('There was an error loading the data.');
          }
      });
  
  
  document.write('&lt;/ul&gt;');
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is the result: <a href="http://i.stack.imgur.com/qypsk.png" rel="nofollow">image</a>
  As you can see, the layout is totally broken now. What happens? Why? How do i fix this to obtain dinamically the first result?</p>
  
  <p>EDIT:
  This is another try i did:</p>
  
  <pre><code>$(document).ready(function(){
      $(document).bind('deviceready', function(){
          //Phonegap ready
          onDeviceReady();
      });
  
  
      //var output = document.getElementById("output");
      var _ul = document.createElement('ul');
  
      _ul.setAttribute("data-role", "listview");
  
  
      $.ajax({
          url: 'db_to_app_prod.php',
          dataType: 'jsonp',
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){
              $.each(data, function(i,item){ 
  
                  var _li =  document.createElement('li');
                  _li.setAttribute("data-icon", "false");
                  _li.innerHTML = '&lt;li data-icon="false"&gt;'+
                  '&lt;a href="" id="'+item.id+'"&gt;'+
                  '&lt;img src="http://gestisciapp.it/gruppodipalo/images/'+item.img+'"&gt;'+
                  '&lt;h2&gt;'+item.marca+'&lt;/h2&gt;'+
                  '&lt;p class="wrap"&gt;'+item.descrizione+'&lt;/p&gt;'+
                  '&lt;span class="ui-li-count"&gt;'+item.prezzo+' €&lt;/span&gt;'+
                  '&lt;/a&gt;&lt;/li&gt;';    
  
                  _ul.appendChild(_li);
  
              }); 
  
          },
          error: function(){
             output.text('There was an error loading the data.');
          }
      });
      document.getElementById("output").appendChild(_ul);
  
  });
  </code></pre>