Adding html variables dynamically with javascript

I want to add html variables : "<script>var var1 = new CalendarPopup();</script>" according to a number that the user chooses. At the moment I have an ajax setup that is suppose to change my tag to add the variables by changing the inner html like so :

<div id="calVar">
    <script>
        var cal1 = new CalendarPopup();
        var cal2 = new CalendarPopup();
    </script>
</div>



        function addRespDropDownAjax(currentNumberOfDropDown)
    {

        //Prepare a new ajaxRequest.
        if (window.XMLHttpRequest) 
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //Ajax receiving the response in this function
        xmlhttp.onreadystatechange = function() 
        {
            //state 4 is response ready.
            //Status 200 is page found.
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {


                document.getElementById('calVar').innerHTML = '<script>var cal3 = new CalendarPopup();</script>';
                    alert(document.getElementById('calVar').innerHTML);

            }
        };

        //Send the Ajax request.
        xmlhttp.open('GET','mainServlet?command=ajax.AddRespDropDown&NUMBER_OF_DROP_DOWN=' + currentNumberOfDropDown, true);
        xmlhttp.send();

    }

The last alert :document.getElementById('calVar').innerHTML return nothing and my varaibles are not created. any ideas?

Thanks alot!!