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

Question

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

li 将添加到 ul
无论是单击回车按钮还是按下键盘上的回车键，新的 li 和删除按钮都应该添加到 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 returns 节点列表。 NodeList 不包含 appendChild 方法。所以要么尝试用 ul[0].appendChild 替换 ul.appendChild 要么只是重构你的代码

Answer 2

改变这个，

var ul = document.querySelectorAll("ul");

对此，

var ul = document.querySelector("ul");

因为您的 html 中只有一个 ul。

Answer 3

此解决方案修改您的项目添加代码以包含删除按钮（并将代码重构为专用函数。）

所有删除按钮（标有“delete-btn”class）触发列表项删除。（点击事件冒泡到 ul，监听器所在的位置。）

请参阅代码内注释以获得进一步的解释。

// Identifies DOM elements
const
  listItems = document.querySelectorAll(".todos"),
  input = document.getElementById("userInput"),
  ul = document.getElementById("the-list"), // (NOT `querySelectorAll`)
  button = document.getElementById("enter");

// Conditionally calls addItem function when button is clicked
button.addEventListener("click", function() {
  if (input.value.length > 0) {
    addItem();
  }
});

// Conditionally calls addItem function when ENTER is pressed
input.addEventListener("keypress", function() {
  if (input.value.length > 0 && event.which === 13){
    addItem();
  }
});

// Adds an item to the list (when called by either listener)
function addItem(){
  const
    li = document.createElement("li"),
    txt = document.createTextNode(input.value),
    btn = document.createElement("button");
  // Puts txt & btn inside li
  li.appendChild(txt);
  btn.textContent = "Delete";
  btn.classList.add("delete-btn"); // For later reference
  li.appendChild(btn);  

  ul.appendChild(li); // Puts li inside ul
  input.value = ""; // Clears input
}

// Listens for clicks on the `ul` or its descendants, even if the
//   clicked element gets dynamically added later
ul.addEventListener("click", function(event) {
  // Listeners can automatically access triggering events
  const clickedElement = event.target; // Events have a target property
  if(clickedElement.classList.contains("delete-btn")){
    // Finds ancestor elements and removes li from ul
    const
      li = clickedElement.closest("li"),
      ul = li.closest("ul");
    ul.removeChild(li); // (Or we could add "done" to li's classList)
  }
});

.delete-btn{
  margin-left: 1em;
}

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

<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 id="the-list">
  <li class="todos">Wake up<button class="delete-btn">Delete</button></li>
  <li class="todos">Study<button class="delete-btn">Delete</button></li>
</ul>

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

Adding child element to a parent element using javascript

javascript

appendchild