title: How to add <li> elements dynamically using jQuery (mobile) as listview
body: <p>I'm trying to get jQuery (mobile) to add new <code>&lt;li&gt;</code> elements to a <code>&lt;ul&gt;</code> which has data-role set to "listview"</p>
  
  <p>Here's the html:</p>
  
  <pre><code>    &lt;div data-role="page"&gt;
  
     &lt;header data-role="header"&gt;  
      &lt;h1&gt;Header&lt;/h1&gt;
     &lt;/header&gt;  
  
     &lt;div data-role="content"&gt;  
      &lt;ul data-role="listview" data-theme="a" id="sitelist"&gt;
          &lt;li&gt;&lt;a href="page1.html" data-transition="pop"&gt;Page1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;  
  
     &lt;footer data-role="footer"&gt;  
      &lt;h4&gt;Footer text&lt;/h4&gt;
     &lt;/footer&gt;  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the javascript used:</p>
  
  <pre><code>$('ul').append('&lt;li&gt;&lt;a href="#"&gt;sada&lt;/a&gt;&lt;/li&gt; ');
  
  $('ul').listview('refresh');
  </code></pre>
  
  <p>But the problem is that the output gets rendered as:
  <a href="http://www.dumblegroup.com/Capture.png" rel="nofollow">http://www.dumblegroup.com/Capture.png</a></p>
  
  <p>I'd like the "sada" item to be rendered only once and it should have the same formatting as "Page1".</p>
  
  <p>What am I doing wrong? Thankful for any help!</p>
  
  <p>/Magnus</p>