How do I build an un-ordered list dynamically from json data

How do I modify this function that dynamically builds a drop down list so that I could build an un-ordered list dynamically from json data.

</script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() { 
        jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
            $.each(jsonData, function (i, j) {
                document.index.spec_list.options[i] = new Option(j.options);
       });
     });});
</script>

*spec_list* is id of drop down i.e. 'select' here &a开发者_开发技巧mp; options i.e. in (j.options) is the field in table which data is received as json. I have 'msg' only table field now which data is to be used to dynamically populate 'ul id="msg"'.

So it sounds like you want to append li elements to an existing ul with the ID "msg", where the content of each li comes from the .msg property of each entry in the jsonData:

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var markup;

    markup = [];
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        markup.push("<li>");
        markup.push(j.msg);
        markup.push("</li>");
    });

    jQuery('#msg').append(markup.join(""));
});

Here's a working example. (See the "off-topic" comment below; the working example uses one of the tricks mentioned.)

Or if the new lis should replace the existing ones in the ul, use

jQuery('#msg').html(markup.join(""));

...instead of append.

Either way, that uses the well-known "build it up in an array and then join it" idiom for building up markup, which is almost always more efficient (in JavaScript implementations) than doing string concatenation. (And building up the markup first, and then applying it with a single DOM manipulation call [in this case via jQuery] will definitely be more efficient than adding each li individually).

If you're not concerned about efficiency (this is showing the result of an Ajax call, after all, and if you know there are only a couple of lis to append...), you could do it like this:

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var ul;

    ul = jQuery('#msg');
    // If you want to clear it first: ul.empty();
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        ul.append("<li>" + j.msg + "</li>");
    });
});

...but if you're dealing with a lot of items, or if you were doing this in something that happened frequently, you're probably better off with the build-it-up version.

Off-topic: Your original code mixes using the jQuery symbol and the $ symbol. Probably best to stick to one or the other, so I went with jQuery above. If you're not using noConflict, or if you're doing one of the nifty tricks for using noConflict but still being able to use $, you can safely change the above over to using $ throughout.