js-基础（四）dom实战——留言板

<body>
    <input type="text" onkeydown="addMsg(this)" placeholder="请输入内容2" autofocus />
    <ul class="list"></ul>
    <script>
        function addMsg(ele){
            if(event.key === 'Enter'){
                // 1.获取显示留言的容器
                const ul = document.querySelector('.list');
                // 2.判断用户留言是否为空
                if(ele.value.trim().length === 0 ){
                    alert('请输入');
                    ele.focus();
                    return false;
                }
                // 3.添加一条新留言
                const li = document.createElement('li');
                li.innerHTML = ele.value + '<button onclick = "del(this.parentNode)">删除</button>';
                ul.insertAdjacentElement('afterBegin',li);
                // 4.将输入框中的前一条留言清空
                ele.value=null;
                // 5.焦点重置
                ele.focus();
            }
        }
        function del(ele){
            return confirm('是否删除?') ? ele.remove() : false;
        }
    </script>
</body>
相关文章
