Dynamically adding <li/> to <ul/> in jquery mobile

Question

I'm trying to add list items to unordered lists in jquery mobile, but the formatting doesn't seem to be created properly.

<ul data-role="listview" data-theme="c" data-dividertheme="b">                     <li data-role="list-divider">                         Title Divider                     </li>                     <li>                         <a href="test.html" data-transition="slide">List item 1</a>                     </li>   </ul> 

Script:

$('ul').append('<li><a>hello</a></li>'); 

For some reason the li generated dynamically doesn't display the same way as the one that's statically created. Does anyone know why and how I can make it the same?

Answer 1

Try this:

$('ul').append($('<li/>', {    //here appending `<li>`     'data-role': "list-divider" }).append($('<a/>', {    //here appending `<a>` into `<li>`     'href': 'test.html',     'data-transition': 'slide',     'text': 'hello' })));  $('ul').listview('refresh'); 

Answer 2

The answers provided turned out to be a little bit messy...

$('ul').append('<li><a>hello</a></li>'); is ok, but it needs to refresh the listview, so all you need is:

$('ul').append('<li><a>hello</a></li>').listview('refresh');