简易留言板发布和删除功能

我还是忘不掉

已于 2022-03-24 22:08:20 修改

阅读量840

点赞数 1

文章标签： javascript html

于 2022-03-24 21:39:50 首次发布

本文链接：https://blog.csdn.net/m0_56844750/article/details/123722285

版权

本文介绍了如何通过创建HTML元素，获取页面元素，并利用JavaScript实现留言发布和删除功能。通过这个教程，读者将理解基本的交互式网页开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建HTML元素

<div class="liuyan">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
 </div>

2.获取页面元素


        var text = document.querySelector('textarea'); //获取文本域
        var btn = document.querySelector('button'); //获取发布按钮
        var ul = document.querySelector('ul'); //获取空列表ul

3.代码实现留言发布功能和删除链接

  btn.onclick = function() { //创建按钮点击时间
            if (text.value == '') { //对文本域内容进行判定是否为空
                alert('不能发布空内容');
                return false //空内容执行中断
            } else {
                var li = document.createElement('li') //创建li元素
                li.innerHTML = text.value + '<a href = "javascript:;">删除</a> ' //给li赋值并创建删除链接
                ul.insertBefore(li, ul.children[0]); //将新建的li元素放在最前面;
                var as = document.querySelectorAll('a');
                //获取创建的删除链接
                for (let i = 0; i < as.length; i++) {
                    //遍历创建的a链接
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode)
                            //创建删除点击事件，删除a的父元素li
                    }

                }

            }
        }

4.效果

在这里插入图片描述