JS(节点)-简单发布删除留言

吃不饱的小明同学

已于 2023-04-09 11:38:34 修改

阅读量191

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-12-17 09:58:30 首次发布

本文链接：https://blog.csdn.net/weixin_45959965/article/details/128350652

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 <body>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>添加</button>
        <!-- 创建个ul用来存放添加的节点li -->
        <ul>
        </ul>
        <script>
            //获取元素
            var textarea = document.querySelector('textarea');
            var btn = document.querySelector('button');
            var ul = document.querySelector('ul');
            //1. 添加信息
            //注册事件 
            btn.onclick = function() {
                //创建节点li
                if (textarea.value == '') {
                    alert('请输入内容!'); //（1）.如果textarea 内容为空
                    return false;
                } else {  // (2) .如果textarea 里面有内容
                    // 创建li节点
                    var li = document.createElement('li');
                    //先有li,才能将文本域的内容赋值给li，后面再带上个删除链接
                    li.innerHTML = textarea.value + "<a href='javascript:;'>删除</a>";
                    // li 放进 ul 里面
                    ul.appendChild(li);
                    //insertBefore 将最新的评论添加到最上面 ,ul.children[0]---最新的元素
                    ul.insertBefore(li, ul.children[0])
                    //添加完 再将textarea 内容置空
                    textarea.value = '';
                }
                // 2.删除信息
                //删除元素 获取a链接
                var a= document.querySelector('a');
                //绑定事件
                a.onclick = function(){
               //点击事件 删除（li元素）,ul.removeChild，a.parentNode 删除ul的子节点，a的父节点 ---li
                    ul.removeChild(a.parentNode);
                }
            }
        </script>
    </body>