вставить перед пустым ул - PullRequest
Новая
       15

вставить перед пустым ул

0 голосов
/ 10 марта 2019

У меня есть хороший, рабочий и функциональный список дел. Однако на практике (используя его на телефоне) новые элементы, добавленные в список, скрыты клавиатурой. Поэтому я хочу, чтобы список добавлял каждый элемент в начало или в начало списка, чтобы новые элементы отображались по мере их создания.

Введите "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 = "";
      }
     });

1 Ответ

1 голос
/ 10 марта 2019

Итак, я хочу, чтобы список добавлял каждый элемент в начало или в начало списка ...

Верьте или нет, это так просто: 

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.

...