将ajax响应写入来自php的div

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.