如何使用JavaScript创建多层Div并插入聊天消息变量值

算力阿峰

2026-9-25

错误原因说明

核心报错原因：你代码里的document.getElementsByClassName("newNode")逻辑完全错误。newNode是你已经声明好的DOM节点变量，不需要通过类名查询DOM获取，直接调用变量本身的方法即可。且getElementsByClassName返回的是类数组的HTMLCollection集合，本身没有appendChild方法，调用自然抛出异常。
结构不匹配：你缺少了预期结构中media-body内部的空div层，也没有创建class="chat-cont"的p标签承载消息，直接给media-body设置innerHTML不符合要求。
换行符处理问题：HTML不会识别\n为换行，如果你的消息需要按换行拆分多个p标签，需要单独处理。

正确实现代码

const data = JSON.parse(e.data);
// 1. 创建最外层的media chat-messages层
const newNode = document.createElement('div');
newNode.className = 'media chat-messages';

// 2. 创建media-body层
const newNode2 = document.createElement('div');
newNode2.className = 'media-body chat-menu-content';

// 3. 创建内部的空div层
const innerDiv = document.createElement('div');

// 4. 处理消息，按换行拆分生成多个p.chat-cont标签
const msgLines = data.message.split('\n');
msgLines.forEach(line => {
  const p = document.createElement('p');
  p.className = 'chat-cont';
  p.textContent = line; // 用textContent避免XSS风险，不要用innerHTML
  innerDiv.appendChild(p);
});

// 5. 按层级拼接节点
newNode2.appendChild(innerDiv);
newNode.appendChild(newNode2);
document.getElementById('chat-log').appendChild(newNode);