JS实现发帖评论

利用JS实现有字数限制的发帖评论效果，根据时间顺序，时间较早的评论位于下方。
效果图如下：

JS代码部分

   <script>
        let _send=document.querySelector("#send");
        let _info=document.querySelector("#info");
        let _list=document.querySelector(".list");
        let _num=document.querySelector("#num");

        _send.onclick=function(){
            //获取用户输入信息
            let info=_info.value; //已经输入完毕
            //创建li节点
            let _li=document.createElement("li");
            _li.innerHTML=info;
            //向ul中追加到最前面
            _list.insertBefore(_li,_list.firstChild)

            //清空内容
            _info.value="";
            _num.innerHTML=10;

        }

        //当输入时触发
        _info.oninput=function(){
            let info2=_info.value; //实时输入的值
            let num=10-info2.length;
            if(num<0){
               return;
            }
            _num.innerHTML=num;
        }
    </script>

HTML代码

 <div class="wrapper">
        <div class="content">
            <textarea id="info" maxlength="10"></textarea>
            <div class="active">
                <span>还能输入<span id="num">10</span>个字符</span>
                <span id="send">评论</span>
            </div>
        </div>
        <ul class="list">
        </ul>
     
    </div>

css代码

  *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .wrapper {
            width: 400px;
            margin: 0 auto;
        }

        .content {
            position: relative;
        }

        .content textarea {
            width: 500px;
            height: 150px;
            background-color: #f4efef;
            border-radius: 8px;
            /* 去掉缩放按钮 */
            resize: none;
            border: none;
            outline: none;
            padding: 10px;
        }

        .active {
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 500px;
        }
        #send{
            padding: 5px 15px;
            border-radius:20px;
            background-color: #ce6641;
            color: white;
        }

        .list{
            background-color: #94bad9;
            width: 500px;
            padding: 10px;
        }
        .list>li{
            height: 50px;
        }