jquery markup generation

hello there is a code.

var list = jQuery('<ul />').attr('class', 'list-ul'); $.each(data, function (key, val) { list.append('<li class="list-li">' + val.City + '</li>'); } 

That is, I want to do

 <ul class="list-ul"> <li class="list-li"></li> ...... <li class="list-li"></li> </ul> 

but not created

Items are added if you specify an item.

 $.each(data, function (key, val) { $("#data").append('<li class="list-li">' + val.City + '</li>'); }