document.getElementById与jQuery $ html（）一起接收服务器发送的事件数据

Question

我正在测试通过SSE接收数据

这是我的stream.php文件：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: test\n\n";
flush();
?>

要接收数据，我使用：

var source=new EventSource("stream.php");
    source.onmessage=function(e)
    {
      //document.getElementById("result").innerHTML+=e.data + "<br/>";
        $("#result").html(e.data);
    };

当我使用document.getElementById("result") ，它会重复显示数据。 但是当我使用$("#result").html(e.data) ，它没有。 为什么呢

Answer 1

.innerHTML +=将添加到已经存在的HTML中，请注意+= ，而jQuery的html()方法每次都会覆盖HTML。

jQuery还有其他几种添加到现有标记中的方法，例如append() 。

Answer 2

使用+=e.data脚本+=e.data您+=e.data新内容附加到现有标记中，但是.html()会覆盖现有值。

$("#result").append(e.data + '<br/>')

要么

$("#result").html(function(_, html){
    return html += e.data + '<br/>';
})

Answer 3

.innerHTML+=的+= .innerHTML+=内容追加到现有内容。 那相当于$("#result").html($("#result").html() + e.data);