已解決430363個問題，去搜搜看，總會有你想問的

列表從容器底部開始向上追加

首頁猿問列表從容器底部開始向上追加

列表從容器底部開始向上追加

JavaScript

慕哥9229398 2021-11-04 16:51:22

我正在嘗試制作一個聊天框，消息從底部開始。現在，聊天框會將第一條消息保留在工作表底部，但我希望新消息位于容器底部。這是容器的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);非常感謝任何幫助，祝您有美好的一天。

查看完整描述

2 回答

慕哥6287543

TA貢獻1831條經驗獲得超10個贊

我正在嘗試制作一個聊天框，消息從底部開始?，F在，聊天框會將第一條消息保留在工作表底部，但我希望新消息位于容器底部。

例子

這是容器的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);

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

反對回復 2021-11-04

月關寶盒

TA貢獻1772條經驗獲得超5個贊

使用: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');

}

});

反對回復 2021-11-04

2 回答
0 關注
231 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

列表從容器底部開始向上追加

列表從容器底部開始向上追加

2 回答

添加回答