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

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) {

    if (e.which == '13') {

        if($('ul li').length == 0) {

          $('ul').html(`<li>${this.value}</li>`);

        } else {

          $(`<li>${this.value}</li>`).insertBefore('li:first');

        }

        

    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul></ul>

<input type="text">