I’m building a table with PHP and sending it, line by line, to the browser, who should just put it together.

PHP – getData.php:

header("Content-Type: text/event-stream");
echo "data:<table>nn";
ob_end_flush();
flush();
sleep(1);
for ($i=0; $i<4; $i++) {
    echo "data:<tr>";
    for ($j=0; $j<3; $j++) {
        echo "<td>asdf</td>";
    }
    echo "</tr>nn";
    ob_end_flush();
    flush();
}
sleep(1);
echo "data:</table>nn";
ob_end_flush();
flush();
echo "data:endnn";
ob_end_flush();
flush();

JavaScript:

const evtSource = new EventSource('getData.php');
evtSource.onmessage = function(e) {
    if (e.data != 'end') {
        console.log(e.data);
        getE('divData').innerHTML = getE('divData').innerHTML + e.data;
    } else {
        evtSource.close();
    }
};

Console result:

<table>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>     (4)
</table>

As you can see, the data really went through it. However, the component on the DOM becomes simply:

<div id="divData">
  <table></table>
  asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>

I even added two sleep(), to make sure they are being sent in the correct order, and they are.

What’s possibly going on here?