for循环添加li到ul,同时绑定事件,为什么只有最后一个li绑定到事件(超级感谢大佬)

<body>
 <ul></ul>



    <script>
        var list = document.getElementsByTagName('ul')[0]
        var aLi = document.getElementsByTagName('li')

        for(var i=0;i<9;i++){
            list.innerHTML +=`<li></li>`//循环生成li
            if(0 == i%3){
                aLi[i].style.backgroundColor = 'pink'
            }else if(1 == i%3){
                aLi[i].style.backgroundColor = 'orange'
            }else if(2 == i%3){
                aLi[i].style.backgroundColor = 'skyblue'
            }

            aLi[i].onmouseover = function() {
                this.style.backgroundColor = 'green'//只有最后一个li绑定成功
            }
                    }
                </script>


</body>


var list = document.getElementsByTagName('ul')[0]

        for(var i=0;i<9;i++){
            list.innerHTML +='<li></li>';//循环生成li
        }

        var aLi = document.getElementsByTagName('li')
        for(var i=0;i<aLi.length;i++){
            if(0 == i%3){
                aLi[i].style.backgroundColor = 'pink'
            }else if(1 == i%3){
                aLi[i].style.backgroundColor = 'orange'
            }else if(2 == i%3){
                aLi[i].style.backgroundColor = 'skyblue'
            }

            aLi[i].onmouseover = function() {
                this.style.backgroundColor = 'green'
            }
        }

var aLi = document.getElementsByTagName('li') 这个时候还没有添加 li 元素，怎么查找到li元素的？