InsertBefore li元素，关闭按钮无显示

Question

我正在制作一个TODO列表，我想在之前添加项目...代码正在运行但由于某种原因，我的关闭按钮不会来......但是如果我只是添加“appendChild”的项目即将到来

//添加列表项

var list = document.createElement("li");
var textNode = document.createTextNode(textInput);
list.appendChild(textNode);
if (textNode == ' ') {
  alert("Nothing to add!");
} else {
  var uList = document.getElementById("my-todo-list").appendChild(list);
  // var uList = document.getElementById("my-todo-list");
  // uList.insertBefore(list, uList.childNodes[0]);
}

//关闭按钮

var listItems = document.getElementsByTagName('li');
for (var i = 0; i < listItems.length; i++) {
  var spanItem = document.createElement('span');
  spanItem.style.float = 'right';
  var myCloseSymbol = document.createTextNode('\u00D7');
  spanItem.classList.add("closeBtn");
  spanItem.appendChild(myCloseSymbol);
  listItems[i].appendChild(spanItem);
}

https://jsfiddle.net/headbangz/8yzdL312/

Answer 1

我在你的代码上发现了这个问题。以下代码存在问题。

listItems[i].appendChild(spanItem);

根据您的概念，您首先添加新的li元素，但在最后一个li元素上添加关闭按钮。此声明应如下所示。

listItems[0].appendChild(spanItem);

我已经评论了您的insertBefore行并验证了上述内容。你可以在这个更新的Fiddle中查看。