lovecoding
/
VIP23


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id="sz">深圳</li>
        <li>广州</li>
    </ul>


    <!--  在标签内  -->
    <button onclick="addCity()" id="btn1" >添加城市</button>

    <!-- 绑定  推荐   -->
    <button onclick="delCity()" id="btn2" >删除城市</button>


    <div style="width: 100px; height: 100px;border :1px solid red"; ></div>


   用户 <input type="text">

</body>
<script>

    let inputElement = document.getElementsByTagName("input")[0];

    inputElement.onfocus = function (){
        console.log("聚焦")
    }

    inputElement.onblur = function (){
        console.log("离焦")
    }


    let divElement = document.getElementsByTagName("div")[0];

    divElement.onmouseout = function (){
        alert("鼠标移出")
    }

    divElement.onmouseover = function (){
        alert("鼠标移入")
    }


    let btn2 = document.getElementById("btn2");
    //事件
    btn2.onclick = function (){
        //找到广州
        let ul = document.getElementsByTagName("ul")[0];
        //执行删除
        ul.lastElementChild.remove();

    }
    function addCity(){
        //添加城市
        let li = document.createElement("li")

        let liText = document.createTextNode("哈尔滨")

        //文本添加到元素中
        li.append(liText)

        //找到ul
        let ul = document.getElementsByTagName("ul")[0];

        ul.appendChild(li);
    }


</script>
</html>