Trying to deal XML with Ajax
===

I Wrote a code that takes a generates XML file from Harvard Uni, and put it in a dropdown, next you can choose a course from the list and it will generates a table with the course details.

    <script type="text/javascript" src="Script/jquery-1.4.1.js"></script>
         <script type="text/javascript">
            function loadXMLDoc() {
                document.getElementById("span").style.visibility = "visible";
                document.getElementById("button").style.visibility = "hidden";
                $.ajax({
                    type: "GET",
                    url: "http://courses.cs50.net/api/1.0/courses?field=COMPSCI&output=xml",
                    success: function (data) {
                        var courses = data.documentElement.getElementsByTagName("course");
                        var options = document.createElement("select");
                        $(options).change(function () {
                            ShowCourseDetails(this);
                        });
                        for (var i = 0; i < courses.length; i++) {
                            var option = document.createElement("option");
                            option.value = courses[i].getElementsByTagName("cat_num")[0].text;
                            option.text = courses[i].getElementsByTagName("title")[0].text;
                            options.add(option, null);
                        }
                        document.getElementById("selectDiv").appendChild(options);
                        document.getElementById("span").style.visibility = "hidden";
                    }
                });
            }
    
            function ShowCourseDetails(event) {
                // get the index of the selected option 
                var idx = event.selectedIndex;
                // get the value of the selected option 
                var cat_num = event.options[idx].value;
                $.ajax({
                    type: "GET",
                    url: "http://courses.cs50.net/api/1.0/courses?output=xml&&cat_num=" + cat_num,
                    success: function (data) {
                        $("#TableDiv").html(ConvertToTable(data.documentElement));
                    }
                });
            }
            function ConvertToTable(targetNode) {
                targetNode = targetNode.childNodes[0];
                // first we need to create headers
                var columnCount = 2;
                var rowCount = targetNode.childNodes.length
                // name for the table
                var myTable = document.createElement("table");
                for (var i = 0; i < rowCount; i++) {
                    var newRow = myTable.insertRow();
                    var firstCell = newRow.insertCell();
                    firstCell.innerHTML = targetNode.childNodes[i].nodeName;
                    var secondCell = newRow.insertCell();
                    secondCell.innerHTML = targetNode.childNodes[i].text;
                }
                // i prefer to send it as string instead of a table object
                return myTable.outerHTML;
            }
        </script>

and the body:
 <div id="main">
	

		<div class="left">
             <input id="button" type="button" onclick="loadXMLDoc()" value="Get all science courses from HARVARD"/>
             <br />
             <span id="span" style="visibility: hidden">Downloading courses from harvard....</span>
             <div id="selectDiv"></div>
             <div id="TableDiv"></div>
        </div>
    </div>

and What I get in the dropdown is only "undefined" on all the rows in the dropdown, can someone can see the problem with the code I wrote?

10x alot in advance :)