Creating unordered list in a DIV

Question

I have a DIV. I want to dynamically generate a bulleted list inside the DIV using jQuery with a items list I have with me

for (cnt = 0; cnt < someList.length; cnt++) {
                         someList[cnt].FirstName + ":" + someList[cnt].LastName + "<br/>"
                        // what to write here?
                    }

Thanks!

Answer 1

Script:

$(function(){
    someList = [ {FirstName: "Joe", LastName: "Smith"} ,
                 {FirstName: "Will", LastName: "Brown"} ]

    $("#target").append("<ul id='list'></ul>");
    $.each(someList, function(n, elem) {
       $("#list").append("<li>" + elem.FirstName + " : " + elem.LastName + "</li>");
    });
});

and html:

<div id="target" />

Answer 2

hacky

var list = "<ul>"
for (cnt = 0; cnt < someList.length; cnt++) {
    list += "<li>" + someList[cnt].FirstName + ":" + someList[cnt].LastName + "</li>"
}
list += "</ul>";

no even bothering with creating dom objects properly :)

Answer 3

Keeping things as simple as possible. Using your existing javascript, You would just need to add this:

    $('#myDiv').append("<ul id='newList'></ul>");
    for (cnt = 0; cnt < someList.length; cnt++) {
          $("#newList").append("<li>"+someList[cnt].FirstName + ":" + someList[cnt].LastName+"</li>");
    }

Since your HTML already has the DIV:

<div id="myDiv"></div>