2021-01-20

最新推荐文章于 2023-02-26 13:36:22 发布

sss555.

最新推荐文章于 2023-02-26 13:36:22 发布

阅读量331

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/m0_45270741/article/details/112909826

版权

练习专栏收录该内容

9 篇文章 7 订阅

订阅专栏

webapi03-练习
有错望指正！！！

动态添加列表（加强训练）

题目描述
页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色
训练目标
能够创建、添加节点和使用事件委托。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>西施</li>
        <li>貂蝉</li>
        <li>昭君</li>
        <li>凤姐</li>
        <li>芙蓉姐姐</li>
    </ul>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.addEventListener('click', function() {
            var li = document.createElement('li');
            li.innerHTML = '杨超越';
            ul.insertBefore(li, ul.children[0]);
        });
        // 事件委托
        ul.addEventListener('click', function(e) {
            e.target.style.backgroundColor = 'red';
        })
    </script>
</body>

</html>