麻烦老师看下是否正确，是否需要改动，谢谢老师

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        div:not(:nth-of-type(2)) {
            width: 500px;
            height: 100%;
            background-color: #a0e4ff;
            margin: 0 auto;
        }

        /*ul默认有外边距*/

        ul {
            width: 300px;
            height: 100%;
            background-color: #ecc7ea;
            list-style: none;
            /*清除默认边距*/
            margin: 0;
            padding: 0;
            margin: 20px auto;
            margin-bottom: 30px;
        }

        li {
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 30px auto;
            background-color: #cdffc0;
        }
    </style>
</head>
<body>
<div id="box">
    <button id="btnAdd">添加元素</button>
    <button id="btnRemove">删除元素</button>
    <ul id="list">我是ul
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
    </ul>
</div>
<script type="text/javascript">
    //此处填写代码
    let lis = document.getElementsByTagName("li"),
        ul = document.getElementById("list"),
        addBtn = document.getElementById("btnAdd"),
        delBtn = document.getElementById("btnRemove");
    for (let i of lis) {
        i.onmouseover = function () {
            this.style.backgroundColor = "blue";
        };
        i.onmouseout = function () {
            this.style.backgroundColor = "red";
        }
    }
    addBtn.onclick = function () {
        let liNew = document.createElement("li"),
            text = document.createTextNode("我是li" + (lis.length + 1));
        liNew.appendChild(text);
        ul.appendChild(liNew);
    };
    delBtn.onclick = function () {
        if (lis.length !== 0) {
            ul.removeChild(ul.lastElementChild);
        }
    }
</script>
</body>
</html>

秋荏苒 2019-07-20

源自：JS DOM操作 11-2 编程练习