javascript - 使用 javascript 将子元素添加到父元素

Question

我正在尝试将子元素添加到父元素，如下所示:

• li 添加到 ul
• 单击 Enter 按钮或按下键盘上的 Enter 键时，应将新的 li 和 delete 按钮添加到 ul.

我的代码无法正常工作。有人可以帮我解决这个问题吗？

HTML:

<h1>Simple Add/Remove Task</h1>
<h2>To do List</h2>

<input type="text" placeholder="enter your tasks" id="userInput">
<button id="enter">Enter</button>
<ul>
  <li class="todos">Wake up <button>Delete</button></li>
  <li class="todos">Study<button>Delete</button></li> 
</ul>

CSS:

.done {
  text-decoration: line-through;
}

Javascript:

var listItems = document.querySelectorAll(".todos");
var input = document.getElementById("userInput");
var ul = document.querySelectorAll("ul");
var button = document.getElementById("enter");

button.addEventListener("click", function(){
  if(input.value.length>0){
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
  }
});

input.addEventListener("keypress", function(){
  if(input.value.length > 0 && event.which === 13){
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
  }
});

for (var i = 0; i<listItems.length; i++){
  listItems[i].addEventListener("click", function(){
    this.classList.toggle("done");
  });
}

Answer 1

querySelectorAll 返回 NodeList。 NodeList不包含appendChild方法。因此，要么尝试用 ul[0].appendChild 替换 ul.appendChild ，要么重构代码