如何通过JavaScript实现格式一致的新增评论插入功能？

问题分析 #

1. DOM结构缺失：原代码仅尝试将评论文本直接插入元素，未按照已有评论的.list完整结构生成新评论，导致格式完全不符。
2. 插入位置错误：#new-comment位于旧评论下方，插入内容会显示在旧评论之后，无法实现“评论区上方”的需求。
3. 文本节点未正确使用：创建了文本节点却未使用，反而直接append字符串，不符合DOM操作规范。

修改后的JavaScript代码 #

var post = document.getElementById("post");
post.addEventListener("click", function(e) {
    e.preventDefault();
    var userComment = document.getElementById("comment-box").value.trim();
    
    // 拦截空评论提交
    if (!userComment) return;

    // 深度克隆已有评论的完整结构
    var existingComment = document.querySelector(".post-comment .list");
    var newComment = existingComment.cloneNode(true);

    // 修改新评论的内容
    newComment.querySelector(".comment").textContent = userComment;
    // 可根据需求自定义用户名和时间
    newComment.querySelector(".name").textContent = "ME";
    newComment.querySelector(".day").textContent = "刚刚";

    // 将新评论插入到评论区最顶部
    var postCommentContainer = document.querySelector(".post-comment");
    postCommentContainer.insertBefore(newComment, postCommentContainer.firstChild);

    // 清空输入框
    document.getElementById("comment-box").value = "";
});

关键修改说明 #

• 克隆已有结构：通过cloneNode(true)深度克隆旧评论的.list元素，确保新评论与旧评论格式完全一致。
• 调整插入位置：使用insertBefore将新评论插入到.post-comment容器的第一个子元素前，实现“显示在评论区上方”的效果。
• 内容替换：修改克隆元素内的评论文本、用户名和时间，适配新评论的信息。
• 空评论拦截：添加trim()判断，避免提交无意义的空评论。
• 优化用户体验：提交后自动清空文本域，方便用户继续评论。

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