appendChild可能会删除元素吗？

Question

我正在尝试创建一个简单的待办事项列表应用程序JavaScript。 我编写了JavaScript，基本上是从输入元素中获取值并将其传递给几个函数。

我在CodePen上创建了一个实时示例，您可以在此处查看： http ://cdpn.io/hnBmD

编辑：代码也位于下面？

看来appendChild可能会删除父函数正在创建的“ li”节点？ 有人可以给我一个合理的解释吗？

注意：我确实将JavaScript放在了单独的文件中，并且正要在结束body标签之前加载它。

HTML：

<form>
 <p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>

JavaScript的：

// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
      }
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
    var listItem = document.createElement("li");
    listItem.innerText = itemText;
    list.appendChild(listItem);
    itemText = inItemText.value = "";
}

谢谢！

Answer 1

您需要在onclick函数调用addNewItem之后返回false 。 否则它将提交表单，从而重新加载页面。

submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
        return false;
      }
}

DEMO

或更简单地说：

submitButton.onclick = function(){
    var itemText = inItemText.value.trim();
    if (itemText !== "" || itemText == " ") {
        addNewItem(document.getElementById("toDoList"), itemText);
    }
    return false;
}

或者，正如评论之一所建议的那样，删除表格，那么就没有什么要提交的了。

Answer 2

如果不需要，请删除表单 ，或者只是阻止默认的表单提交操作。

submitButton.onclick = function (e) {
        e.preventDefault();
        var itemText = inItemText.value;
        if (itemText == "" || itemText == " ") {
            return false;
        } else {
            addNewItem(document.getElementById("toDoList"), itemText);
        }
 }

Answer 3

HTML中的button元素具有type属性submit 。 触发其click事件时，将执行默认操作，即提交表单。 您需要防止这种默认行为。

var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");

submitButton.onclick = function(e){
  e.preventDefault(); //prevent it from submitting
  var itemText = inItemText.value;
  if (itemText == "" || itemText == " ") {
    return false;
  } else {
    addNewItem(document.getElementById("toDoList"), itemText);
  }
}

function addNewItem(list, itemText) {
 var listItem = document.createElement("li");
 listItem.innerText = itemText;
 list.appendChild(listItem);
}