简单留言板案例

最新推荐文章于 2023-08-29 17:29:08 发布

刻晴加强了吗

最新推荐文章于 2023-08-29 17:29:08 发布

阅读量110

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/A951299034/article/details/120676939

版权

简单留言板案例

<!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 {
            width: 400px;
            height: 50px;
            background-color: darkmagenta;
            line-height: 50px;
            color: #fff;
            font-size: 20px;
        }

        li a {
            float: right;
            height: 50px;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>提交</button>
    <button id="shan">删除</button>
    <ul>
    </ul>
    <script>
        // // 创建节点
        // var li = document.createElement('li');
        // // 添加节点 node.appendChild(child) node 是父级 child是子级 后面追元素 类似于数组里的 push
        // var ul = document.querySelector('ul');
        // ul.appendChild(li);
        // // 添加节点 ul.insertBefore(child,制定的元) 的前面添加
        // var lili = document.createElement('li')
        // ul.insertBefore(lili,ul.children[0]);
        // // 我们想要在网页中添加一个新原 需要两步 1创建元素 2添加元素


        // 案例 添加留言板
        // 获取节点
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var shan = document.getElementById('shan');
        var ul = document.querySelector('ul');
        // 创建节点
        btn.onclick = function () {
            // 案例核心思想 每当我点击了一次就创建一个新的节点 然后在给他添加
            if (text.value === '') {
                alert('请输入内容');
                return false;
            } else {
                // 创建元素
                var li = document.createElement('li');
                // javascript:; 写在 href 里可以让 a 不进行任何跳转
                li.innerHTML = text.value +"<a href='javascript:;'>删除</a>";
                // 添加元素
                ul.insertBefore(li, ul.children[0]);
                // 删除元素
                var as = document.querySelectorAll('a');
                for(var i = 0;i<as.length;i++){
                    as[i].onclick = function(){
                        // 因为 as 的亲父亲是 li 所以我们可以利用 node.removeChild(Child) 来删除 因为 node 必须是 删除元素的父亲， li 的父亲为 ul 所以 node 为ul  child 为 当前 a 的父亲 为 this.parentNode
                        ul.removeChild(this.parentNode)
                    } 
                }
            }
        }
        // 依次删除
        shan.onclick = function () {
            if (ul.children.length === 0) {
                // 如果 ul 里没有孩子了 那么就警用按钮
                this.disabled = true;
            } else{
                // 然后依次 删除 ul 里的第一个孩子 
                ul.removeChild(ul.children[0]);
            }
        }
        
    </script>
</body>

</html>

刻晴加强了吗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单留言板案例

简单留言板案例<!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"> <tit
复制链接

扫一扫