JavaScript小案例——发布留言榜

最新推荐文章于 2024-08-20 16:48:16 发布

momo不吃辣

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量228

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_54645034/article/details/128422553

版权

这篇博客演示了一个简单的JavaScript实践，用于创建一个动态留言系统。用户在文本区域输入内容后，点击发布按钮，内容将被添加为列表项，并附带删除链接。删除链接点击后能即时移除对应的留言。这个功能通过动态创建DOM元素、事件监听和DOM操作来实现，展示了JavaScript在前端交互中的基本应用。

摘要由CSDN通过智能技术生成

前言：这只是一个简单的相对静态的发布流程，仅仅是用作js节点操作中的增加节点和删除节点练习，如果想要更符合实际需求，需要自己完善。

那么以下就演示一下留言榜的发布和删除

核心思路：

1.点击按钮后，动态创建一个li，添加到ul里创建li的同时，把文本域里面的值通过li.innerHTML赋值给li，如果想要新的留言后面显示就用appendChild如果想要前面显示就用inserBefore。

2.当我们把文本域里面的值赋值给li的时候，多添加一个删除链接需要把所以的链接获取过来，当我们点击链接的时候，删除当前链接所在的li。

3.阻止链接跳转需要添加JavaScript.void（0）或者Javascript：；

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li a{
            float: right;
        }
    </style>
</head>
<!-- 核心思路：点击按钮后，动态创建一个li，添加到ul里
创建li的同时，把文本域里面的值通过li。innerHTML赋值给li
如果想要新的留言后面显示就用appendChild如果想要前面显示就用inserBefore -->
<!-- 当我们把文本域里面的值赋值给li的时候，多添加一个删除链接
需要把所以的链接获取过来，当我们点击链接的时候，删除当前链接所在的li
阻止链接跳转需要添加JavaScript.void（0）或者Javascript：； -->
<body>
    <textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        btn.onclick=function(){
           if(text.value==''){
            alert("您没有输入内容");
            return false;
           }else{
            
            var li=document.createElement('li');
            li.innerHTML=text.value + "<a href='Javascript:;'>删除</a>";
            // 添加元素
            // ul.appendChild(li);
            ul.insertBefore(li,ul.children[0]);
            // 删除元素，删除的是当前链接的li，它的父亲
            var as =document.querySelectorAll('a');
            for(var i = 0;i<as.length;i++){
                as[i].onclick = function(){
                    ul.removeChild(this.parentNode);
                }
            }
           }

            
        }
    </script>
</body>
</html>