Как я могу создать элемент и добавить класс и текст в DOM?

Question

Мне хорошо известно, что этот вопрос задавался ранее, я проверил ответы, но не смог понять, что не так с моим кодом. Я пытаюсь добавить текст в список из пользовательского ввода, используя даже клик, поэтому мой вопрос в том, что я сделал не так здесь?

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() возвращает список узлов , а не ссылку на элемент. Вы хотите querySelector()

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