从div底部到顶部显示的JavaScript/PHP文本

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

目前，数据显示在div的顶部并向下运行，目标是让最新的注释从底部向上显示在屏幕上

当前代码段：

阿贾克斯：

---

HTML聊天室

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

我怎样才能做到这一点

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

---

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

我认为这就是您要搜索的内容：

// html
<div id="chat-wrapper">
    <div id="chat-content">

        text1<br>
        text2<br>
    </div>
</div>

// CSS
#chat-wrapper {
    border: 1px #ededed solid;
    height: 200px;
    overflow-y: scroll;     
    background-color: white;
    text-align: left;
    position: relative;
}

#chat-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 25px;
}

到

最好只将新添加的消息从服务器发送到客户端，否则最终可能会收到大量消息。但这需要更多的工作。（在客户端上保存最新发送的消息，将该时间戳添加到请求中，…）

这可能会有帮助：

#chat {

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

}

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

// html
<div id="chat-wrapper">
    <div id="chat-content">

        text1<br>
        text2<br>
    </div>
</div>

// CSS
#chat-wrapper {
    border: 1px #ededed solid;
    height: 200px;
    overflow-y: scroll;     
    background-color: white;
    text-align: left;
    position: relative;
}

#chat-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 25px;
}

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

document.getElementById("chat-content").innerHTML = this.responseText;