2021-01-20

sss555.

于 2021-03-25 09:39:40 发布

阅读量301

点赞数

分类专栏：练习

本文链接：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>

结果图
在这里插入图片描述

sss555.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-01-20

webapi03-练习有错望指正！！！动态添加列表（加强训练）题目描述页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色训练目标能够创建、添加节点和使用事件委托。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=
复制链接

扫一扫