javascript - insertBefore 在空 ul 中

Question

我有一个漂亮、有效且实用的待办事项 list 。然而，在实践中(在手机上使用它)，添加到列表中的新项目会被键盘隐藏。因此，我想让列表将每个项目添加到列表的开头或顶部，以便在创建新项目时看到它们。

输入“insertBefore()”，只要之前有子项插入，它就可以正常工作，否则会抛出错误。

您如何使用空列表来完成这项工作？只需执行“如果没有子元素，则执行此操作 - 否则 - 执行此操作”，或者是否有一个简单的添加到该过程？

var inputText = document.getElementById("textField");
  var myUl = document.getElementsByTagName("ul");

  inputText.addEventListener("keypress", function(event){
   if( event.keyCode === 13){
    var myInputText = this.value;
    var listItem = document.createElement("li");
    var spanItem = document.createElement("span");
    var theText = document.createTextNode(myInputText);
    var span_img = document.createElement("img");
    span_img.src = "images/trashCanBlack.png";
    spanItem.appendChild(span_img);
    listItem.appendChild(spanItem);
    listItem.appendChild(theText);

    myUl[0].appendChild(listItem); // this works, but only adds it on the end
    this.value = "";
      }
     });

Answer 1

So I want to have the list add every item to the beginning, or top of the list...

不管你信不信，就是这么简单:

myUl[0].insertBefore(listItem, myUl[0].firstChild);

如果 myUl[0] 为空(因此它的 firstChild 为 null)就可以了。 insertBefore 足够聪明，可以处理这个问题(通过有效地成为 appendChild)。

<小时/>

旁注:而不是做:

var myUl = document.getElementsByTagName("ul");

...然后在任何地方使用 myUl[0] ，您可以考虑:

var myUl = document.querySelector("ul"); // returns the first one

或

var myUl = document.getElementsByTagName("ul")[0];

...然后只需使用 myUl。