列表从容器底部开始向上追加

Question

我正在尝试制作一个聊天框，消息从底部开始。现在，聊天框会将第一条消息保留在工作表底部，但我希望新消息位于容器底部。

这是容器的css。

#messageList {

    padding: 0;

    list-style-type: none;

    height: 300px;

    max-height: 300px;

    overflow-y: scroll;

    display: flex;

    flex-direction: column;

    justify-content:flex-end;

}

这是将消息添加到视图的位置。

        var li = document.createElement("li");

        li.textContent = encodedMsg;

        var list = document.getElementById("messageList");

        list.insertBefore(li, list.firstChild);

非常感谢任何帮助，祝您有美好的一天。

Answer 1

我正在尝试制作一个聊天框，消息从底部开始。现在，聊天框会将第一条消息保留在工作表底部，但我希望新消息位于容器底部。例子这是容器的css。#messageList {    padding: 0;    list-style-type: none;    height: 300px;    max-height: 300px;    overflow-y: scroll;    display: flex;    flex-direction: column;    justify-content:flex-end;}这是将消息添加到视图的位置。        var li = document.createElement("li");        li.textContent = encodedMsg;        var list = document.getElementById("messageList");        list.insertBefore(li, list.firstChild);非常感谢任何帮助，祝您有美好的一天。

Answer 2

使用:first选择器选择第一个元素，然后使用insertBefore().$('input[type="text"]').keypress(function(e) {&nbsp; &nbsp; if (e.which == '13') {&nbsp; &nbsp; &nbsp; &nbsp; if($('ul li').length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('ul').html(`<li>${this.value}</li>`);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(`<li>${this.value}</li>`).insertBefore('li:first');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul></ul><input type="text">