The code so far works, but the rows form horizontally rather than vertically. This is my first time working with XMLHttpRequest() so it's probably pretty sloppy so if there's a better way to do something, I'm all ears



function findCard()
{
str = document.getElementById("cardName").value;
if (str.length<=4)
{
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","CardInfo/cards.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var strLng = str.length;
var x = xmlDoc.getElementsByTagName("card");
var table = document.getElementById("cardDisplay")
var newRow = table.insertRow(0)

for (i=0; i<x.length;i++)
{
var resaultStr = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue.slice(0,strLng)
if (str==resaultStr)
{
newRow.insertCell(0).innerHTML=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
}


}

}

My table is just a blank table created in the body looks something like this

<table id="cardDisplay" border="1">

</table>