jQuery：<ul>中的动态插入将无法正常工作

Question

I'm writing a page in jQuery Mobile and I have an Unordered List which contains elements like these:

<ul id="ul1" data-role="listview" data-theme="d">
            <li>
                <a>
                <h1>Who wants to live forever</h1>
                    <p>Queen</p>
                </a>
            </li>
            <li>
                <a>
                <h1>Personal Jesus</h1>
                    <p>Depeche Mode</p>
                </a>
            </li>
        </ul>

But I want to insert elements DYNAMICALLY, searching in a MySQL database. It works, but the elements that are inserted in the UL DON'T look like the default LI in jQuery Mobile: they appear as simple text thrown in the UL. The jQuery Mobile's "Graphic" is not represented. Here's the codes:

Ajax function for searching through php:

<script>
function ricerca() {
    str = document.getElementById("search").value;
    if (str == "") {
        document.getElementById("ul1").innerHTML = "Nulla";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("ul1").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","cerca.php?ricerca="+str+"&tipo="+document.getElementById("select-choice-0").value,true);
        xmlhttp.send();

    }

Here's the lines of code (in the PHP) that writes the contents in the UL:

// output data of each row
    while($row = $result->fetch_assoc()) {
        if($inizio == 0)
        {if ($row['CodISWC'] != $prev_iswc) {
           echo "<li>
                <a>
                <h1>". $row["NomeCanzone"]. "</h1>
                    <p>". $row["NomeArtista"];
           $prev_iswc = $row['CodISWC']; 
        }
        else{
            echo ", ". $row["NomeArtista"];   
        }

         $inizio = 1;
        }
        else{
            if ($row['CodISWC'] != $prev_iswc) {
           echo "</p>
                </a>
            </li><li>
                <a>
                <h1>". $row["NomeCanzone"]. "</h1>
                    <p>". $row["NomeArtista"];
           $prev_iswc = $row['CodISWC']; 
        }
        else{
            echo ", ". $row["NomeArtista"];   
        }


        }

    }

Answer 1

After updating your list, you need to refresh it, like this:

$('#ul1').listview('refresh');