从 div 底部到顶部出现的 JavaScript/PHP 文本

Question

我有一个聊天程序，它使用 ajax 运行 php 脚本来查询 MYSQL 数据库，提取聊天详细信息并将其提供给 javascript，然后将其推送到 div。

目前，数据显示在 div 的顶部并向下移动，目标是让最新的评论从底部向上显示到屏幕。

当前代码片段:

Ajax :

function displayChat() {

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("chat").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","displayChat.php?",true);
        xmlhttp.send();

    }

---

HTML 聊天 DIV

<div id="chat"></div>

---

PHP代码

$displayChat =mysql_query(
     "select c.userID, u.userName, c.comments, c.datetime, c.tag
     from chat c
     inner join userAccounts u
     on u.userID=c.userID
     order by c.datetime ASC",
    $connection);

while ($row = mysql_fetch_assoc($displayChat )) {
    echo "(".$row['datetime'].")"." <b>".$row['userName']."</b>: ".$row['comments']."<br>";
}

---

CSS

#chat {

    height: 90%;
    overflow-y: scroll;     
    background-color: white;
    text-align: left;
    padding-left: 25px;
    bottom: 0;

}

我怎样才能做到这一点？

Answer 1

var current = document.getElementById("chat").innerHTML;
current.innerHTML = current.innerHTML + this.responseText;

如何将其添加到您的 onreadystatechange AJAX 函数中？