简易发布评论案例原理

至尊鸡

已于 2023-11-30 09:29:56 修改

阅读量81

点赞数

分类专栏： JS 文章标签： html css 前端

于 2023-01-10 16:45:57 首次发布

本文链接：https://blog.csdn.net/m0_72190449/article/details/128632761

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>Document</title>
</head>
<script>
    window.onload=function(){
        var text=document.getElementById("text")
        var button1=document.getElementById("button1")
        var button2=document.getElementById("button2")
        var ul=document.querySelector("ul")
        button1.onclick=function(){
            if(text.value==""){
                alert("没输入")
            }else{
                var li=document.createElement("li")
                li.innerHTML=text.value+"<a href='javascript:;'>删除</a>"
                ul.insertBefore(li,ul.children[0])
                /* 
                留言最后面
                ul.appendChild(li)
                */
               var as=document.querySelectorAll("a")
               for(var i=0;i<as.length;i++){
                as[i].onclick=function(){
                    ul.removeChild(this.parentNode)
                }
               }
                text.value=""
            }
            

        }
        /* 删除 */
        button2.onclick=function(){
            if(ul.children.length==0){
                this.disabled=true
            }else{
                ul.removeChild(ul.children[0])
            }
        }

    }
</script>
<body>
    <div class="box">
        <textarea name="" id="text" cols="30" rows="10"></textarea>
        <button id="button1">发布</button>
        <button id="button2">删除</button>
    </div>
    <ul>
    </ul>
</body>
</html>