如何将来自输入的值和使用 JS 创建的元素添加到列表中？

Question

我正在 JavaScript ES5 中构建一个列表，它说 'node' 某些东西不能是这个或那个。

好吧，这是我第一次真正的冒险。但我不确定如何解决这个问题，也不确定控制台中的 'node' 是怎么回事。我尝试了 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());

找到 here in codepen 更新后的代码。

如何将来自输入的值和使用 JS 创建的元素添加到列表中？

How to add a value from input and a created element with JS to the list?

javascript

ecmascript-5