javascript - 如何创建元素并将类和文本添加到 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);
});

标签： javascripthtmldom

Answer 1

querySelectorAll()返回节点列表而不是元素引用。你要querySelector()

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