js 列表的添加，删除和修改_js列表添加数据-优快云博客

本文链接：https://blog.youkuaiyun.com/Korey__/article/details/126790736

本文介绍如何使用HTML、CSS和JavaScript实现一个简单的前端列表，用户可以添加新的条目并支持修改和删除功能，通过事件监听实现交互。

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

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

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }



        .wrap {

            width: 760px;

            margin: 0 auto;

            /* border: 1px solid black; */

            font-size: 20px;

            text-align: center;

        }



        button {

            width: 50px;

            height: 30px;

            font-size: 18px;

        }



        ul {

            margin-bottom: 20px;

        }



        li {

            display: flex;

            justify-content: space-between;

            padding-bottom: 15px;

            padding-top: 10px;

            border-bottom: 1px solid red;

        }



        span {

            font-size: 18px;

            display: inline-block;

            width: 50px;

            height: 30px;

            line-height: 30px;

            background: red;

            color: #fff;

        }



        span:nth-child(1) {

            margin-right: 10px;

            background: green;

        }

    </style>

</head>



<body>

    <div class="wrap">

        <ul>

            <li>

                列表1

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

            <li>

                列表2

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

            <li>

                列表3

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

            <li>

                列表4

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

        </ul>

        <button>添加</button>

        <script>

            var btn = document.querySelector("button");

            var ul = document.querySelector("ul");

            btn.onclick = function () {

                var text = prompt("请输入要添加的内容")

                var createLi = document.createElement("li");

                createLi.innerHTML = text +

                    `<div>

                          <span>修改</span>

                          <span>删除</span>

                    </div> `

                ul.appendChild(createLi);

            }



            ul.onclick = function (eve) {

                var ev = window.event || eve; var target = ev.target || ev.srcElement

                if (target.innerHTML == "修改") {

                    var text = prompt("请输入要添加的内容")

                    target.parentNode.parentNode.innerHTML = text +

                        `<div>

                          <span>修改</span>

                          <span>删除</span>

                    </div> `

                    ul.appendChild(createLi);

                } else if (target.innerHTML == "删除") {

                    target.parentNode.parentNode.remove()

                }

            }

        </script>

    </div>

</body>



</html>