JS (Knoten) – Kommentare einfach veröffentlichen und löschen

 <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>

Supongo que te gusta

Origin blog.csdn.net/weixin_45959965/article/details/128350652
Recomendado
Clasificación