Searching xml

I have an xml file with parts and im trying to search through the list using a javascript search script. It works fine for me but the only problem I have is that when it searches and returns something, it puts it into a table on a blank page, wiping out everything thats on there (heading, designs, etc.). How do I edit this so that it instead puts the table under the search box (where ive labeled "test" in screenshot)? Thanks in advance for the help.

My java script
<script type="text/javascript">
function getType() {
for (var i=0; i < 3; i++) {
if (document.frmMain.criteria[i].checked) {
var rad_val = document.frmMain.criteria[i].value;
}
}
return rad_val;
}

window.onload = loadIndex;

function loadIndex() { // load indexfile
// most current browsers support document.implementation
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("wdparts.xml");
}
// MSIE uses ActiveX
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("wdparts.xml");
}
}



function searchIndex() { // search the index (duh!)
if (!xmlDoc) {
loadIndex();
}
// get the search term from a form field with id 'searchme'

var searchterm = document.getElementById("searchme").value;
var searchtype = getType();
var allitems = xmlDoc.getElementsByTagName("item");
results = new Array;
if (searchterm.length < 3) {
alert("Enter at least three characters");
}
else {
// see if the XML entry matches the search term,
// and (if so) store it in an array \
for (var i=0;i<allitems.length;i++) {
var name = allitems[i].getAttribute(searchtype);
var exp = new RegExp(searchterm,"i");
if ( name.match(exp) != null) {
results.push(allitems[i]);
}
}
// send the results to another function that displays them to the user
showResults(results, searchterm);
}
}



// Write search results to a table
function showResults(results, searchterm) {

if (results.length > 0) {
// if there are any results, write them to a table

document.write('You searched for <b><i>'+searchterm+'</i></b><br><br>');
document.write('<table border="1" style="width: 100%;">');
document.write('<tr><th>Line</th><th>Product Number</th><th>Description</th><th>Link</th></tr>');
for(var i=0; i<results.length; i++) {
document.write('<tr>');
document.write('<td>' + results[i].getAttribute("line") + '</td>');
document.write('<td>' + results[i].getAttribute("pnum") + '</td>');
document.write('<td>' + results[i].getAttribute("description") + '</td>');
document.write('<td>' + results[i].getAttribute("link") + '</td>');
document.write('</tr>');
}
document.write('<table>');
document.close();


} else {
// else tell the user no matches were found
var notfound = alert('No results found for '+searchterm+'!');
}
}
</script>

<style type="text/css">
#TXT {
font-size:18px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bolder;
}

tblalign {
text-align: center;

}
tblalign {
text-align: center;
}
tbl {
text-align: center;
}
</style>

This is the search box
<p><form name="frmMain" id="frmMain" action="">
<b>Search:&nbsp;&nbsp;</b>
<input type="radio" name="criteria" value="line" checked="checked">Line &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
<input type="radio" name="criteria" value="pnum">Product Number &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<input type="radio" name="criteria" value="description">Description &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
<br><br>
<input id="searchme" type="text" size="20">&nbsp;&nbsp;
<input value="Submit" onclick="searchIndex(); return false;" type="submit">
</form></p>
<p id = "test">test </p>

Hi,
Try replace the function with this variant:
//...
// Write search results to a table
function showResults(results, searchterm) {

if (results.length > 0) {
// if there are any results, write them to a table

var reout = 'You searched for <b><i>'+searchterm+'</i></b><br><br>';
reout += '<table border="1" style="width: 100%;">';
reout += '<tr><th>Line</th><th>Product Number</th><th>Description</th><th>Link</th></tr>';
for(var i=0; i<results.length; i++) {
reout += '<tr>';
reout += '<td>' + results[i].getAttribute("line") + '</td>';
reout += '<td>' + results[i].getAttribute("pnum") + '</td>';
reout += '<td>' + results[i].getAttribute("description") + '</td>';
reout += '<td>' + results[i].getAttribute("link") + '</td>';
reout += '</tr>';
}
reout += '<table>';
document.getElementById('test').innerHTML = reout;
} else {
// else tell the user no matches were found
alert('No results found for '+searchterm+'!');
}
}

Excellent. Works good. Thanks. Two more questions, I have it working in IE and Firefox but not Chrome. Anything specific that I should look for? When searching I get my error popup that says the item isnt found even though its definitely in there. And second, f i have another columnin my xml labeled link with a url like www.google.com, is it possible to return it as a hyperlink in the table?

Anyone?