ul insertBefore引发Uncaught TypeError

Question

首先，如果这是一个noob错误，我很抱歉，我是JS和Stack Overflow的新手，我真的无法弄清楚这一点。我正在制作待办事项列表应用程序，包含多个待办事项列表，并且我有一个接收页码并返回列表元素的功能（我在同一个HTML文件中包含所有待办事项列表，并且使用Swipe.js在页面之间移动）。每个名为list的元素都有一个属性，该函数使用JQuery来查找与页码匹配的列表项。下面是函数：

// Return target list based on page number 
function returnList(listNumber, completed) { 
var list; 

if (listNumber == 0 && completed == false) { 
    list = $("ul[list='todo1']") 
} else if (listNumber == 0 && completed == true) { 
    list = $("ul[list='completed1']") 
} else if (listNumber == 1 && completed == false) { 
    list = $("ul[list='todo2']") 
} else if (listNumber == 1 && completed == true) { 
    list = $("ul[list='completed2']") 
} else if (listNumber == 2 && completed == false) { 
    list = $("ul[list='todo3']") 
} else if (listNumber == 2 && completed == true) { 
    list = $("ul[list='completed3']") 
} else if (listNumber == 3 && completed == false) { 
    list = $("ul[list='todo4']"); 
} else if (listNumber == 3 && completed == true) { 
    list = $("ul[list='completed4']"); 
} else { 
    console.log("It's broken. Yay!"); 
} 

return list; 
} 

我再有另一个函数，它的ul元素，并增加了与按钮等给它的列表项。我正在使用insertBefore。下面是函数：

//Adds a new item to the todo list 
function addItemToDOM(text, completed, listNumber) { 
var list = returnList(listNumber, completed); 
console.log(list); 

var item = document.createElement('li'); 
item.innerText = text; 

var buttons = document.createElement('div'); 
buttons.classList.add('buttons'); 

var remove = document.createElement('button'); 
remove.classList.add('remove'); 
remove.innerHTML = removeSVG; 

// Add click event for removing the item 
remove.addEventListener('click', removeItem); 

var complete = document.createElement('button'); 
complete.classList.add('complete'); 
complete.innerHTML = completeSVG; 

// Add click event for completing the item 
complete.addEventListener('click', completeItem); 

buttons.appendChild(remove); 
buttons.appendChild(complete); 
item.appendChild(buttons); 

console.log(list.childNodes); 
list.insertBefore(item, list.childNodes[0]); 
} 

然而，当我运行list.insertBefore它说抛出的list.childNodes[0]说没有子节点的错误。

这里是列表中的HTML代码，如果你需要它：

<div class="container"> 
      <h3 class="listTitle">Do Now</h3> 

      <!-- Uncompleted tasks --> 
      <ul class="todo" id="todo" list="todo1"></ul> 


      <!-- Completed tasks --> 
      <ul class="todo" id="completed" list="completed1"></ul> 
</div> 

任何想法？谢谢！

Answer 1

方法returnList返回一个jQuery对象，它没有childNodes属性。因此预计错误。

您可以使用.get(index)来获取DOM元素的引用，然后可以使用childNodes属性。

var elem = returnList(listNumber, completed) 
//Also handler if undefined is returned from the function 
if(elem == undefined){ 
    return; 
} 
var list = elem.get(0); 

---

你可以使用.prepend()功能与jQuery对象。

list.prepend(item);