如何为评论框添加评论功能，使评论显示在评论框下方？

我已经完成评论框的制作，但缺少评论展示功能，希望实现提交的评论显示在评论框下方。以下是我的代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
    <input type="text" id="my-text" placeholder="Enter comment">
    <p id="result"></p>
    <button id="post">Post</button>
    <ul id="unordered">
       
   </ul>
   
    <script src="code.js"></script>
</body>
</html>

JS代码 #

var myText = document.getElementById("my-text");
var result = document.getElementById("result");
var limit = 140;
result.textContent = 0 + "/" + limit;

myText.addEventListener("input",function(){
    var textLength = myText.value.length;
    result.textContent = textLength + "/" + limit;

    if(textLength > limit){
        myText.style.borderColor = "#ff2851";
        result.style.color = "#ff2851";
    }
    else{
        myText.style.borderColor = "#b2b2b2";
        result.style.color = "#737373";
    }

});

我曾尝试参考教程解决，但未找到可行方案，也不理解实现逻辑，请问有什么解决思路？

解决思路及代码修改 #

核心逻辑

要实现评论展示，关键是在点击「Post」按钮时，把输入的有效评论内容生成新的列表项，添加到页面的<ul>容器中，具体步骤如下：

• 获取按钮和评论列表容器元素
• 给按钮绑定点击事件，触发评论创建逻辑
• 校验评论有效性（跳过空内容或超长内容）
• 生成承载评论的DOM元素并插入列表
• 重置输入框状态，方便用户继续输入

修改后的完整JS代码

var myText = document.getElementById("my-text");
var result = document.getElementById("result");
var postBtn = document.getElementById("post");
var commentList = document.getElementById("unordered");
var limit = 140;
result.textContent = 0 + "/" + limit;

// 原有输入字数统计逻辑
myText.addEventListener("input",function(){
    var textLength = myText.value.length;
    result.textContent = textLength + "/" + limit;

    if(textLength > limit){
        myText.style.borderColor = "#ff2851";
        result.style.color = "#ff2851";
    }
    else{
        myText.style.borderColor = "#b2b2b2";
        result.style.color = "#737373";
    }
});

// 新增评论提交逻辑
postBtn.addEventListener("click", function() {
    var commentContent = myText.value.trim();
    var currentLength = commentContent.length;
    
    // 过滤无效评论
    if (currentLength === 0 || currentLength > limit) {
        return;
    }

    // 创建单条评论元素
    var commentItem = document.createElement("li");
    commentItem.textContent = commentContent;
    // 可自定义样式类：commentItem.classList.add("comment-item");

    // 将评论插入列表顶部（用appendChild可放到底部）
    commentList.prepend(commentItem);

    // 重置输入状态
    myText.value = "";
    result.textContent = 0 + "/" + limit;
    myText.style.borderColor = "#b2b2b2";
    result.style.color = "#737373";
});

逻辑说明

• document.createElement("li")：动态生成列表项，用来存放单条评论，符合HTML语义化规范
• commentList.prepend(commentItem)：把新评论放到列表最上方，若想按时间顺序放在底部，改用commentList.appendChild(commentItem)
• 校验环节避免无效评论提交，提升交互合理性
• 重置输入状态让用户可以快速发起下一条评论

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