Dom——添加留言

添加留言

效果展示

效果如上图所示，可以在文本框里输入内容，点击发布按钮可发布信息，如下图。

点击删除后该条消息删除，其余消息依然按位置排列

核心思想

1. 点击发布按钮后，动态创建一个li添加到ul中
2. 通过li.innerHTML把框内的值赋给li
3. 独自设置新li的添加顺序，从后面显示就appendChild()，从前面显示就insertBefore()

代码

html部分

<div>
    <textarea>123</textarea>
    <button>发布</button>
</div>
<ul></ul>

css部分

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    div {
        width: 500px;
        height: 60px;
        margin: 100px auto;
        line-height: 40px;
        border: 1px solid blue;
        border-radius: 10px;
        overflow: hidden;
    }
    
    div textarea {
        float: left;
        width: 80%;
        height: 100%;
        padding-left: 10px;
        outline: none;
        resize: none;
    }
    
    div button {
        float: left;
        width: 20%;
        height: 100%;
        cursor: pointer;
        color: #fff;
        background-color: skyblue;
    }
    
    ul {
        width: 500px;
        margin: 100px auto;
    }
    
    li {
        background-color: #ccc;
        margin-bottom: 5px;
    }
    
    li a {
        float: right;
        text-decoration: none;
        color: red;
    }
</style>

javasxript部分

<script>
    // 获取事件源
    var btn = document.querySelector('button');
    var ipt = document.querySelector('textarea');
    var ul = document.querySelector('ul');
    // 注册事件
    btn.onclick = function() {
        // 进行判断，如果用户没输入内容则弹出提示
        if (ipt.value == '') {
            alert('no information');
            return false;
        } else {
            // 创建元素节点
            var li = document.createElement('li');
            // 先有li才能给li赋值
            li.innerHTML = ipt.value + "<a href='javascript:;'>删除</a>";
            // 添加元素节点
            ul.appendChild(li);
            // 这一步是实现发布后文本框的内容清空功能
            ipt.value = '';
            // 删除事件：之所以写在里面是因为你每每点击一次发布就得检索一下按钮个数，要不然写在外面的话，程序运行一次就结束了，按钮个数没检索到
            var as = document.querySelectorAll('a');
            for (let i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    // 想删除的是当前a所在的li
                    ul.removeChild(this.parentNode);
                }
            }
        }
    }
</script>