Write ajax response into a div from php - php

Question

I am trying to make an incredibly simple ajax call, but it wont work.
Here is the php side called by ajax( This returns the correct response )
<?php
$returnValue = '';
$allUploads = array_slice(scandir('./uploads'), 2);
$returnValue .= '<table>';
foreach ($allUploads as $upload) {
$returnValue .= '<tr><a href ="/uploads/' . $upload . '>' . $upload . '</a></tr>';
}
$returnValue .= '</table>';
echo($returnValue);
?>
And here is the javascript thats letting me down
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange =
function ()
{
if (this.readyState == 4 && this.status == 200)
{
alert(this.responseText);
document.getElementById("filedisplaytable").innerHTML = this.responseText;
}
};
xhttp.open("GET", "listuploads.php", true);
xhttp.send();
</script>
Worst thing about this is, that the alert statement is outputting exactly what I want to write:
<table>
<tr>
<a href ="/uploads/DSC001.jpg>DSC001.jpg</a></tr><tr><a href ="/uploads/DSC002.jpg>DSC002.jpg</a>
</tr>
<tr>
<a href ="/uploads/DSC003.jpg>DSC003.jpg</a>
</tr>
</table>
But when I write that into the div it writes the a hrefs 1st followed by an empty table...
Any help is greatly appreciated.... struggling to do such simple things really gets me down

Answer 1

Your HTML is invalid.
An <a> element cannot be a child element of a <tr>.
Only <td> and <th> are allowed there.
The problem you are experiencing is likely the result of the browser attempting to recover from your error by moving the <a> elements to somewhere they are allowed (i.e. outside the table).
Write valid HTML instead. It looks like you don't have a tabular data structure so probably shouldn't be using a table in the first place. A list might be a better bet.

Answer 2

Like Quentin said, your HTML is invalid. <a> tags are allowed in <td> though.
Replace your PHP line of code with this one:
$returnValue .= '<tr><td><a href ="/uploads/' . $upload . '>' . $upload . '</a></td></tr>';