使用appendchild将多个子项添加到无序列表

Question

大家好，

    // Create element
const li  = document.createElement('li');

// Add class
li.className = 'collection-item';


// Add attribute
li.setAttribute('title', 'New Item');

// Create text node and append
li.appendChild(document.createTextNode('Hello World'));

// Create new link element
const link = document.createElement('a');
// Add classes
link.className = 'delete-item secondary-content';
// Add icon html
link.innerHTML = '<i class="fa fa-remove"></i>';

// Append link into li
li.appendChild(link);

// Append li as child to ul

document.querySelectorAll(".btn")[0].addEventListener("click", function(){
  document.querySelector('ul.collection').appendChild(li);
})

这是我用来将创建的元素附加到无序列表的代码。当我第一次单击该按钮时，它可以正常工作，但是随后什么也没有发生。我希望每当我单击按钮时都会添加一个新元素。为什么只附加元素一次？你们可以帮我吗？