add elements dynamically to an unordered list

HI there, I am looking at some exercises found here and there on the net, and I am attempting to resolve one which basically asks to populate a unordered list with items. I am having quite a few problems, although I'd say that's probably an easy thing to do. ANyway, code's here:
HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script type = "text/javascript" src = "script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body onload = "getCities()">
<div id = "cities">
<ul id = "cities_list">
<li></li>
<li></li>
<li></li>
<li></li>


</ul>

</div>
</body>

</html>

CSS:


#cities
{

background-color:green;
width:100%;
height: 400px;

}

#cities_list
{

display:none;

}

javascript:

var city_arr = new Array("London", "Madrid", "Leeds", "Barcelona");

var index;

function getCities(){

for (index = 0; index < city_arr.length; index++)

{

$("li#cities_list").html("city_arr[index]").show('fast');

}


}

Now, the idea is that I have already an unordered list on my html. The list is hidden with css and the script should add the elements of the array in the list, but it's not happening
Any idea as to why? and perhaps suggestion as to how to proceed please?
thanks

add elements dynamically to an unordered list

dupalo

daveVk

dupalo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week