html - 在容器中从下到上添加带有文本的 div

Question

是否可以在大 div 容器中从下到上添加带有文本消息的 div？我想从底部开始列出我的聊天消息。任何带有消息的新 div 我需要在带有旧消息的现有 div 下方添加（在底部容器中）。

谢谢。

  <div id="public_message_container" style="overflow:auto;width:500px;height:300px;">
    <div class='public_message'><b>Nick1:</b> Message1</div>
    <div class='public_message'><b>Nick2:</b> Message2</div>
    <div class='public_message'><b>Nick3:</b> Message3</div>
    <div class='public_message'><b>Nick4:</b> Message4</div>
</div>

当我动态添加消息 1-4 时，我希望它从下到上显示，因为它们来了。

Answer 1

您需要选择容器的最后一个孩子，然后使用插入.after()

$("#public_message_container div").last().after("<div class='public_message'><b>Nick5:</b> Message5</div>")