来抄作业了，留言板上写出你的故事....

我来啦，喜欢的宝宝们往下看吧！

一、添加留言 

 二、删除留言

今天是一个简单的留言板案例，主要是输入内容后点击提交内容就可以到留言区域显示的一个操作！

一、添加留言 

具体效果如下所示： 

 1、首先第一点还是老规矩，先搭建好一个 html 框架！

    

        
        提交
        
留言区：
        

    

 2、现在基本上是有一个外形了，当然为了好看可以用 css 给他修饰一下，我这里的目的只是为了做出这样一个效果，所以 css 写的比较简单，大家可以参考一下！（抄作业的同学可以把它的外观样式写的好看一点）

        body {
            background-color: skyblue;
        }

        .box {
            position: relative;
            width: 350px;
            margin: 20px auto;
        }

        button {
            position: absolute;
            right: 0;
            top: 100px;
            width: 100px;
            height: 60px;
            border: 0;
            font-size: 20px;
        }

        textarea {
            outline: none;
        }

        li {
            padding: 5px 0;
        }

3、接下来就是我们今天的重头戏了，用 JavaScript 写的点击事件，创建节点和添加节点的操作，是我们今天这个案例主要的体现所在。一看上面的代码就可知 ul 里面是空的，这里留言成功就能往 ul 里面添加数据，原来没有这个节点，所以我们需要创建一个新的节点，当然常见节点还不够，不然识别不到给谁创建的一个新节点，我们这里还需要一个添加节点的操作，新创建的节点 li 添加到 ul 里面，然后再把文本域里面的内容用 innerHTML 添加到 li 里面，这样才算是完成整个操作过程。

最后我在这里还写了一个判断条件，当文本域里面没有内容的时候，就可以出现一个提示框提示我们此时里面是没有内容的无法提交。

 二、删除留言

有添加就有删除，我们这里也做一个简单的删除操作，为了方便，就在上面代码的基础上修改！

1、我们在添加内容到 li 里面的时候 同时在后面添上一个 链接，但是在这里为了阻止链接的跳转，在地址位置添加 javascript:; 或者 javascript:void(0);

    li.innerHTML = text.value + "删除";

此时我们的添加的链接所呈现的样子并不好看，所以我们可以在用 css 稍微修改一下样式！ 

 代码如下所示：

        li a {
            float: right;
        }

 修改后看起来顺眼多了有没有！

 2、下面又是一个重要的环节，删除节点 ！ 

    //删除留言
    var a = document.querySelectorAll('a');
    for (var i = 0; i < a.length; i++) {
        a[i].onclick = function () {
            //node.removeChild(child);这里删除的是li，li的父亲为ul，li是a的父亲为 this.parentNode.
            ul.removeChild(this.parentNode);
        }
    }

  在添加节点下面紧接着写上以上代码，就可以实现删除操作啦！下面是我们做好的最终效果！

今天的分享到这里就结束了，喜欢的宝宝们别忘了收藏加关注哦！！