js追加元素一闪而过是怎么回事

var ul = document.querySelector('ul');

var button=document.querySelector('button');

button.addEventListener('click', function() {

    for (var i = 0; i < val; i++) {
        console.log(i);
        var li = document.createElement('li');
        ul.appendChild(li);
    }

})

我想的是在ul盒子里面追加5个li，单最后网页的效果却有点怪，点一下button,五个li出来，删一下就过去了，检查ul里面的li，发现没有

看代码除了没有定义val以外没有任何问题

逻辑上来说应该不会的

代码放全一下看看