I\'m trying to add list items to unordered lists in jquery mobile, but the formatting doesn\'t seem to be created properly.
You will have to add a class to the list tag
$('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello')) ;
JQuery mobile automatically adds a class to the list items, which can be seen if you run your page in firefox and debug it using firebug. Select whatever class has been applied and add it to your dynamically generated li tag.
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');
Your <a> tag is not referencing a webpage.
try:
$('ul').append('<li><a href="test2.html' data-transition="slide" />List Item 2</li>');
And if you want to change the attributes of UL, you might have to call .trigger('create') for the enclosing div. this ensures that UL is created again with properties reset.
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');