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

改为使用prepend。这是我写的一个简单示例：

 var li = document.createElement("li");
        li.textContent = 'a';
        var list = document.getElementById("messageList");
        list.append(li)

var li2 = document.createElement("li");
        li2.textContent = 'b';
        list.prepend(li2)

“ b”将在“ a”之前

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">

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

2 个答案: