how to insert child elements into a listview?

I have a UL listview. I want to inse开发者_StackOverflow社区rt LI elements into it via a function which spits out individual LIs. append() does not seem to work for me. Any suggestions?

You need to use .listview('refresh');

Working Example:

• http://jsfiddle.net/phillpafford/AfedX/2/
• http://jsfiddle.net/phillpafford/AfedX/3/ (adding navigation to both pages)

JS:

$('#li-nav').append('<li><a href="#page2">Page 2</a></li>').listview('refresh');

HTML:

<div data-role="page" id="home"> 
    <div data-role="content"> 
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="li-nav"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#page1">Page 1</a></li> 
        </ul> 
    </div>
</div>

<div data-role="page" id="page1"> 
    <div data-role="content"> 
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Home</a></li> 
        </ul> 
    </div>
</div>

<div data-role="page" id="page2"> 
    <div data-role="content"> 
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Home</a></li> 
        </ul> 
    </div>
</div>

Did you try the following code : (it should be adding one li to ol or ul)

$(“<li>Your Value</li>”).appendTo(“#yourlistboxid”);

Or something like this

$("<li />")
  .append(
    $("<a />")
     .attr("href" ,"http://stackoverflow.com")
     .text("Hello"))
  .click(function() {
    alert('hi');
  })
  .appendTo("#saved-list");

I dont know about jquery-mobile, but it should be working.