Windows 10笔记本美食购物网站极简HTML/JS评论区实现及代码修复求助

• getElementsByClassName 返回值是类数组的DOM元素集合，不是单个节点，直接对集合调用appendChild会抛出类型错误，这是评论无法插入的核心原因
• 元素挂载逻辑错位：手动创建的username、heading、text三个标签全程未填充内容、未挂载到DOM树；创建完成的newName、newTopic、newCom三个文本节点挂错了父容器，其中评论内容的文本节点根本没有被挂载到任何位置
• 容器引用混乱：代码里同时声明了两个类名指向.comment的容器（变量名分别为comment和commentation），实际操作时把文本节点塞到了从未被挂载的comment变量上，最终被插入到userbox里的commentation是空容器

function leaveComment(){
  // 获取表单输入项
  const nameInput = document.getElementById('name');
  const topicInput = document.getElementById('topic');
  const commentInput = document.getElementById('commenttt');

  // 基础非空校验
  if (!nameInput.value.trim() || !topicInput.value.trim() || !commentInput.value.trim()) {
    alert("请完整填写昵称、评论主题与评论内容");
    return;
  }

  // 按原结构搭建评论DOM
  const userName = nameInput.value.trim();
  const topicText = topicInput.value.trim();
  const commentText = commentInput.value.trim();

  const userbox = document.createElement("div");
  userbox.className = "userbox";

  // 头像区域
  const pfpBox = document.createElement("div");
  pfpBox.className = "pfp";
  const pfpImg = document.createElement("img");
  pfpImg.setAttribute('src', 'multimedia/images/pfp.jpg');
  pfpImg.setAttribute('alt', '用户头像');
  const userNameTag = document.createElement("h2");
  userNameTag.textContent = userName;
  pfpBox.append(pfpImg, userNameTag);

  // 评论内容区域
  const commentBox = document.createElement("div");
  commentBox.className = "comment";
  const topicTag = document.createElement("h3");
  topicTag.textContent = topicText;
  const contentTag = document.createElement("p");
  contentTag.textContent = commentText;
  commentBox.append(topicTag, contentTag);

  userbox.append(pfpBox, commentBox);

  // 正确获取评论列表容器：取类集合的第一个匹配项
  const commentList = document.getElementsByClassName("comments")[0];
  // 新评论插入到列表顶部，符合浏览习惯
  commentList.insertBefore(userbox, commentList.firstChild);

  // 提交完成后清空表单
  nameInput.value = "";
  topicInput.value = "";
  commentInput.value = "";
}

• 所有可交互元素的点击热区保持44px以上尺寸，匹配桌面端鼠标操作的精准度，避免误触
• 无需添加冗余的过渡动画，依托系统自带的Edge、Chrome浏览器原生渲染能力即可保证流畅度，减少不必要的性能消耗
• 评论区样式保持极简，仅添加基础边距、分割线即可，适配Windows系统默认的字体渲染效果，不需要额外加载自定义字体
• 输入框使用默认桌面端样式即可，不需要做移动端的适配改造，降低开发复杂度

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