insertBefore 在一个空的 ul

Question

我有一个不错的、有效的和实用的 to-do 列表。然而，实际上（在 phone 上使用它），添加到列表的新项目被键盘隐藏。所以我想让列表将每个项目添加到列表的开头或顶部，以便在创建新项目时看到它们。

输入"insertBefore()"，只要前面有一个child可以正常插入，否则会报错。

您将如何处理空列表？只是做一个 "if there are no child elements, do this - else - do that" 还是对流程进行简单的添加？

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.

insertBefore 在一个空的 ul

insertBefore in an empty ul

javascript

appendchild