How would i add more detail to my dynamic created list view with jquery mobile?

Question

How would i go about adding a href and a listview header to the below code. If i add it in the html part i dont get the list html and js below

  <script type="text/javascript">
                            $(document).on("pagebeforeshow", "#index1", function() {
                                $(function(){
                                    var items="";
                                    $.getJSON("check-events.php",function(data){
                                    $.each(data,function(index,item) 
                                    {
                                    items+="<li>"+item.enddate+"</li>";
                                     });
                                    $("#contacts").html(items); 
                                    $("#contacts").listview("refresh");
                                    });
                                });
                            });  
                        </script>

            <div data-role="fieldcontain">
                        <ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">

            </ul>
            </div>

where do i put this

<li data-role="list-divider" role="heading">
                List view
            </li>

Answer 1

Let your HTML code look like this:

<ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
    <li data-role="list-divider" role="heading">
        List view
    </li>                           
</ul>

and instead of this jQuery line:

$("#contacts").html(items);

use this one:

$("#contacts").append(items);

This way a header will be in a listview before you start populating it and append function will add new content inside a listview without removing previous one.