如何用JavaScript动态创建HTML聊天消息元素？

步骤1：添加聊天容器 #

先在index.html的<body>中添加一个容器，用来承载所有聊天消息：

<div id="chat-container" class="chat__conversation-board"></div>

步骤2：编写JavaScript逻辑 #

通过异步请求获取data.json，然后根据每条消息的position字段动态生成对应的聊天元素：

// 定义左右角色的配置信息
const userConfig = {
  r: {
    avatar: './customer.jpg',
    nickname: 'Dennis Mikle',
    containerClass: 'chat__conversation-board__message-container reversed'
  },
  l: {
    avatar: './agent.jpg',
    nickname: 'Monika Figi',
    containerClass: 'chat__conversation-board__message-container'
  }
};

// 获取聊天容器
const chatContainer = document.getElementById('chat-container');

// 生成单条消息的DOM元素
function createMessageElement(message) {
  const config = userConfig[message.position];
  if (!config) return null;

  // 创建容器div
  const container = document.createElement('div');
  container.className = config.containerClass;

  // 构建人物信息部分
  const personHTML = `
    <div class="chat__conversation-board__message__person">
      <div class="chat__conversation-board__message__person__avatar">
        <img src="${config.avatar}" alt="${config.nickname}" />
      </div>
      <span class="chat__conversation-board__message__person__nickname">${config.nickname}</span>
    </div>
  `;

  // 构建消息内容部分
  const contextHTML = `
    <div class="chat__conversation-board__message__context">
      <div class="chat__conversation-board__message__bubble">
        <span>${message.line}</span>
      </div>
    </div>
  `;

  // 将HTML插入容器
  container.innerHTML = personHTML + contextHTML;
  return container;
}

// 从服务器获取数据并渲染聊天
async function loadChatMessages() {
  try {
    const response = await fetch('data.json');
    const data = await response.json();
    
    // 遍历每条消息，生成元素并添加到容器
    data.lyrics.forEach(message => {
      const messageElement = createMessageElement(message);
      if (messageElement) {
        chatContainer.appendChild(messageElement);
      }
    });
  } catch (error) {
    console.error('加载聊天数据失败:', error);
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', loadChatMessages);

说明 #

• userConfig：统一管理左右角色的头像、昵称和容器类名，避免重复代码，后续修改角色信息只需调整此处。
• createMessageElement：根据每条消息的配置生成完整DOM元素，通过innerHTML快速构建结构，也可以改用createElement逐个创建节点以实现更精细的DOM操作。
• loadChatMessages：使用async/await异步获取data.json，遍历消息数组生成元素并挂载到容器，同时处理加载失败的异常情况。

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