lovecoding
/
Web1020


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940
							<!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>
    <div class="box">
        <div class="box1">项目一</div>
        <div class="box2">项目二</div>
        <div class="box3">项目三</div>
        <div class="box4">项目四</div>
        <div class="box5">项目五</div>
    </div> 
    <button id="btn">添加项目</button>
    <script>
        // var aBox = document.getElementsByClassName("box")[0].getElementsByTagName("div");
        var aBox = document.getElementsByClassName("box")[0].children;
        var oBtn = document.getElementById("btn");
        var oBox = document.getElementsByClassName("box")[0];
        // for(var i=0;i<aBox.length;i++){
        //     aBox[i].addEventListener("click",function(){
        //         console.log(this.innerText);
        //     })
        // }
        // 事件委托 通过给父元素绑定事件 来处理内部子元素事件
        oBox.addEventListener("click",function(e){
            console.log(e.target.innerText);
        })

        oBtn.addEventListener("click",function(){
            var oDiv = document.createElement("div");
            oDiv.innerText = "项目六";
            oBox.appendChild(oDiv);
        })

    </script>
</body>
</html>