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);