如何使用jQuery动态追加ul元素，实现收发消息功能？

没问题，要实现动态追加收发消息到<ul>里，咱们用JavaScript就能轻松搞定，下面给你具体的实现方案：

1. 先整理基础HTML结构 #

首先给你的现有<ul>加个id（方便JS定位），结构如下：

<ul id="chatMessages">
  <li class="sent">
    <img src="http://emilcarlsson.se/assets/mikeross.png" alt="发送者" />
    <p>How the hell am I supposed to get a jury to believe you when I am not even sure that I do?!</p>
  </li>
  <li class="replies">
    <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="回复者" />
    <p>When you're backed against the wall, break the god damn th...</p>
  </li>
</ul>

2. 编写通用的消息添加函数 #

写一个可复用的函数，传入消息类型（发送/回复）、头像地址、消息内容，就能自动创建对应的消息元素并追加到列表里：

// 获取聊天消息容器
const chatContainer = document.getElementById('chatMessages');

// 动态添加消息的工具函数
function addChatMessage(type, avatarSrc, content) {
  // 创建<li>元素并添加对应的类
  const messageItem = document.createElement('li');
  messageItem.classList.add(type);

  // 创建头像<img>元素
  const avatar = document.createElement('img');
  avatar.src = avatarSrc;
  avatar.alt = type === 'sent' ? '我' : '对方';

  // 创建消息内容<p>元素
  const messageContent = document.createElement('p');
  messageContent.textContent = content;

  // 把头像和内容组装到<li>里
  messageItem.appendChild(avatar);
  messageItem.appendChild(messageContent);

  // 追加到聊天容器末尾
  chatContainer.appendChild(messageItem);

  // 可选：自动滚动到最新消息位置
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

3. 调用函数添加新消息 #

现在你可以直接调用这个函数来快速添加收发消息：

// 添加一条自己发送的消息
addChatMessage('sent', 'http://emilcarlsson.se/assets/mikeross.png', 'Wait, what are we even doing here?');

// 添加一条对方回复的消息
addChatMessage('replies', 'http://emilcarlsson.se/assets/harveyspecter.png', 'Winning. That\'s what we\'re doing.');

4. 额外优化建议（可选） #

• 结合输入框使用：监听输入框的回车事件，把用户输入的内容通过addChatMessage添加到列表
• 给聊天容器加CSS样式：比如让发送的消息右对齐、回复的消息左对齐，设置头像固定大小，提升视觉体验

这样就能完美实现动态追加收发消息的功能啦～

内容的提问来源于stack exchange，提问作者user9655816