老师你好，我想要新创建的li标签也有鼠标效果，用的document.getElementsByTagName获取的元素类数组，长度可以动态更新，但为啥只有下面的文本数字实现了动态，而for循环里的没有动态更新呢？

以下是script部分代码：

(function(){
   var btnAdd = document.querySelector('#btnAdd');
   var btnRemove = document.querySelector('#btnRemove');
   var list = document.querySelector('#list');// 获取ul元素
   var lis = document.getElementsByTagName('li');// 获取li标签类数组，动态
   var li = null;

   for(var i = 0; i < lis.length; i++){
       lis[i].onmouseenter = function() {
           this.style.backgroundColor = 'purple';
       };

       lis[i].onmouseleave = function() {
           this.style.backgroundColor = 'orange';
       };
   }

   //点击删除元素
   btnRemove.onclick = function(){
       (lis.length >=1)? list.removeChild(list.lastElementChild):null;
   };

   //点击创建元素
   btnAdd.onclick = function () {
       li = document.createElement('li');
       li.appendChild(document.createTextNode('我是li'+(lis.length+1)));
       list.appendChild(li);
   };
})()