添加，修改，删除列表内容

最新推荐文章于 2024-09-02 07:00:00 发布

吃人说梦.

最新推荐文章于 2024-09-02 07:00:00 发布

阅读量126

点赞数 1

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/z18438394156/article/details/120496210

版权

<body>
    <ul>
        <li>列表一 <span class="del">删除</span><span>修改</span></li>
        <li>列表二 <span class="del">删除</span><span>修改</span></li>
        <li>列表三 <span class="del">删除</span><span>修改</span></li>
        <li>列表四 <span class="del">删除</span><span>修改</span></li>
    </ul>
    <button>添加</button>

</body>
<script>
    // 练习
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');

    btn.onclick = function() {
        var a = prompt('请输入你要添加的内容');
        ul.innerHTML += '<li>' + a + ' <span class="del">删除</span><span>修改</span></li>';
    }
    ul.onclick = function(e) {
        e = e || window.event;
        if (e.target.innerHTML.trim() == '删除') {
            e.target.parentNode.remove();
            // e.target.parentNode.remove();
        } else if (e.target.innerHTML.trim() == '修改') {
            var a = prompt('请输入你要修改的内容');
            e.target.parentNode.innerHTML = a + ' <span class="del">删除</span><span>修改</span>';
        }
    }
</script>