I have a JavaScript function that takes xml data and forms it to an html table with the rowspan being a variable. This function is in a <div> in my html. When you go to the page the table takes over the screen and replaces the other content.

Here is the <div>:
Code:
	<div id="content">
		<script type="text/javascript">
			load_catalog("herb");
		</script>
	</div>
Here is the JavaScript that calls the xml:
Code:
function load_catalog(type)
{
	var url='/xml/beggs_nursery_catalog.xml';
	new Ajax.Request(url,
	{
		method:'get',
		onSuccess: function(transport)
		{
			var catalog_array = transport.responseXML;
			table_write(type,catalog_array);
		},
		onFailure: function(){ alert('Call failed') }
	});
}
Here is the JavaScript that writes the table:
Code:
function table_write(type, catalog_array)
{
	var plant_type_array=catalog_array.getElementsByTagName(type);
	document.write('<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">');

...writes the headings...

	for(count=0;count<plant_type_array.length;count++)
	{
		var row_count=0;
		var common_name_array=plant_type_array[count].getElementsByTagName("common_name");
		var cultivar_array=plant_type_array[count].getElementsByTagName("cultivar");

...defines several variables...

Then, depending on if an xml node is present or not, it document.write()'s the table out.
Am I going about this the wrong way? Why isn't it writing the table into the div like it did before I used Prototype.js? Any help is appreciated, thanks.