将数组的值写入动态生成的li里面

最近在自学vue ，v-for可以遍历将数组的值写入li里面

   <div class="one">
        <ul>
            <li v-for = "item in arr">{{item}}</li>
        </ul>
    </div>

    <script>
        let one = new Vue({
            el : ".one",
            data : {
                arr : ["A","B","C","D","E"],
            }
        })
    </script>

感觉有点简单 直接使用v-for就可以批量写入了 

于是想试试原生的写法 

    <div>
        <ul class="one">
        </ul>
    </div>
    <script>
        var arr = ["A","B","C","D","E"];
        var ul = document.querySelector(".one");
        console.log(ul);
        for(var i = 0;i<arr.length;i++){
            var lis = document.createElement("li");
            ul.appendChild(lis)
            lis.innerHTML = arr[i];
        }

后面最后一行这样写 ：lis[i].innerHTML = arr[i];

一直没有成功，为啥不需要加这个[i]？

大佬帮忙解答一下！！

后面试试把这个[i]删除了 反而达到了我想要的  果然是神奇的代码