js实现简单的发表说说功能

  • 作者:村长
  • 发布时间:2020-05-08 13:37
  • 分类:JavaScript
  • 标签: 热门推荐

简单的实现发表内容添加和列表展示功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建删除元素</title>
    <style>
        .box{
            width:200px;
            height: 100px;
            background: tomato;
        }
        .box h1{
            color:#fff;
        }
    </style>
</head>
<body id="body">
    
    <textarea name="say" id="say" cols="30" rows="4"></textarea>
    <input type="button" value="发表说说" onclick="sendComment()">

    <h3>说说列表:</h3>
    <ul id="content">
        <!-- 评论列表 -->
    </ul>

    <script>
        var say = document.getElementById("say");
        var content = document.getElementById("content");

        //发表评论
        var num = 1;
        function sendComment()
        {
            //获取文本框内容
            var con = say.value;
            //创建li
            var li = document.createElement("li");
            //拼凑发表内容格式
            var str = num+"楼:"+con+"<a href='#' onclick='del(this)'>删除评论</a>";
            li.innerHTML = str;
            //在 父节点后的节点前插入一个新标签:  父节点.insertBefore(新标签,父元素下的新节点对应的位置);
            // content.insertBefore(li,content.childNodes[0]);
            content.appendChild(li);
            num++;
        }

        //删除评论
        function del(obj)
        {
            if(confirm("您是否要删除该评论?"))
            {
                //把当前这个标签的父节点删除
                content.removeChild(obj.parentNode);                
            }
        }
    </script>
</body>
</html>


  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP