如何从输入和使用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中找到更新后的代码。