如何创建元素并将类和文本添加到DOM？

Question

我很清楚，这个问题是在之前问过的，我检查了answears，但是我无法弄清楚我的代码有什么问题。我试图通过使用单击甚至从用户输入将文本添加到列表中，所以我的问题是我在这里做错了什么？

HTML

<div class="item item2">
   <h3 class="list-title">Title</h3>
   <ul class="scroll-wrap">
      <li class="list-items">Scope</li>
      <li class="list-items">Design</li>
      <li class="list-items">Function</li>
   </ul>
   <input type="text" name="Input" class="add-item"><input class="add-btn" type="submit" value="Add Item">
</div>

和JS

let button = document.querySelectorAll('.add-btn');
let addItem = document.querySelectorAll('.add-item');
let list = document.querySelectorAll('.scroll-wrap');

button.addEventListener('click', function() {
    let listItem = document.createElement('li');
    listItem.classList.add('list-items');
    listItem.appendChild(document.createTextNode(addItem.value));
    list.appendChild(listItem);
});

Answer 1

querySelectorAll()返回nodelist而不是元素引用。您要querySelector()

let button = document.querySelector('.add-btn');
let addItem = document.querySelector('.add-item');
let list = document.querySelector('.scroll-wrap');