如何從輸入和使用JS創建的元素添加值到列表？

Question

我正在JavaScript ES5中建立一個列表，它說“節點”不能是這個或那個。

好吧，這是我第一次真正的冒險之旅。 但是我不確定該如何解決，也不確定控制台中“節點”的內容。 我嘗試了node.appendChild，appendNode等...幾乎可以想到的所有東西。

這是代碼的CodePen： https ://codepen.io/Aurelian/pen/ypKxwL?editors = 1010

JS：

       window.onload = function() {

  ///////////////////
  //Variables
  ///////////////////

  //   Variables
  var newTaskInput = document.querySelector('#new-task');
  var addTaskButton = document.querySelector('#add-task');



  var incompleteTasks = document.querySelector('#incomplete-tasks');
  //var completeTasks = document.querySelector('#complete-tasks');

  function createNewTaskElement(userValue) {
    var listItem = document.createElement('li');
    var label = document.createElement('label');
    var editInput = document.createElement('input');
    var editButton = document.createElement('button');
    var deleteButton = document.createElement('button');

    label.innerHTML = userValue;
    editInput.type = "text";
    editButton.className = "edit";
    deleteButton.className = "delete";

    // Insert that to the li
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);

    return listItem;;
  }


  // Function
  function addNewTask() {

    incompleteTasks.push(createNewTaskElement);
  }

  //function deleteTask () {
    // this.pop;
  //}

  //Events
  addTaskButton.addEventListener('click', addNewTask);

}

HTML：

<div class="container">


<div class="">
  <label for="new-task">Add Item</label>
  <input id="new-task" type="text">
  <button id="add-task">Add</button>
</div>

<div>
  <h3>Todo List</h3>
  <ul id="incomplete-tasks">
        <li>
          <label>Pay Bills</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
  </ul>
</div>


</div>

Answer 1

您沒有將createNewTaskElement調用為函數，並且incompleteTasks並非是其DOM對象的數組，因此沒有push方法可用。

incompleteTasks.push(createNewTaskElement);

應該

incompleteTasks.appendChild(createNewTaskElement());

在codepen中找到更新后的代碼。