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

Question

我正在制作TODO列表，我想在之前添加项目... 代码工作但由于某种原因，我的关闭按钮不会来.. 但是，如果我只使用＆＃34; appendChild＆＃34;

添加项目即将到来

//添加列表项

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。

中查看