聊天界面如何实现新消息置底

没怎么写过聊天界面，最近上手的项目要求，在这，进行一下简单的实现过程。有所不足，请多多指教：

然后我们要实现的效果如下：

实现代码如下：
html：

<ul id="talkArea" style="border: 1px solid;width: 100px;height: 100px;overflow: auto;"></ul>
<input type="text" id="getMsg">
<button id="sendMsg" style="width: 50px;height: 50px;">发送</button>

js：（记得引入jquery）

 $("#sendMsg").click(function () {
        //从input中获取数据，挂载到ul上
        $("#talkArea").append((`
        <li>${$("#getMsg").val()}</li>
        `)).siblings('#getMsg').val('');
        //然后重点来了，
        var talkArea = document.getElementById('talkArea');
        talkArea.scrollTop = talkArea.scrollHeight;
    })

方法还有很多，这次先介绍一种。