ul insertBefore throws Uncaught TypeError

Question

まず、noobエラーの場合は申し訳ありませんが、私はJSとStack Overflowを初めて使い慣れており、実際にはこれを理解できません。私はToDoリストアプリケーションを作ることに取り組んでいます。複数のToDoリストがあり、ページ番号を取得してリスト要素を返す関数を持っています（同じhtmlファイルにすべてのToDoリストがあり、Swipe.jsを使用していますページ間を移動する）。私はリストと呼ばれる各ul要素の属性を持っており、この関数は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を使用しています。ここでは、その関数がある：私はlist.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.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は、childNodesプロパティを持たないjQueryオブジェクトを返します。したがって、エラーが予想されます。

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

---

あなたはjQueryオブジェクトで.prepend()機能を使用することができます。

list.prepend(item);