I'm having trouble placing some data returned by an ajax function in the page where I want it.

I've included the relevant html and the javascript function below. There is some php code included which works but is not relevant to this question. The first ajax part of the function works. I have tested it with positive results in another context.

The part starting with "var x . . ." is the part that is not working. This part is supposed to generate the following html:

<div id="1">{content returned by ajax function}</div>

inside of the <div id="circ_1">

It doesn't.

Help!

Here is the html that calls the function:

<div id="circ_1">
<table cellspacing="0">
<tr>
<td class="bg" height="100" align="center" valign="middle" onMouseOver="showHidePage('circ_1', 'page-1')" ><? if (!empty($row['title_short'])) echo $row['title_short']; ?></td>
</tr>
</table>
</div>

Here's the function:

function showHidePage(objID, page) {

//Set remote php location.
var serverPage = 'pages/' + page + '.php';

//Assign the container div to a variable
var obj = document.getElementById(objID);

//Implement ajax request.
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

//Create new html objects and include ajax results.
var x = document.createElement('div');
x.setAttribute("id","1");
var text = xmlhttp.responseText;
var y = document.createTextNode(text);
x.appendChild(y);

//Append to container object
obj.appendChild(x);

}