Interactive Web Pages with JavaScript - What is an object/

I think I missed something key in this module. Here are the error messages I am dealing with:

Uncaught TypeError: Cannot read property 'length' of undefined        app.js:134 

Uncaught TypeError: incompleteTasksHolder.appendChild is not a function     app.js:54 

the variable in question is "incompleteTasksHolder" but the same could be said for "completedTasksHolder" at line 139, if I comment out 134 to 137.

"incompleteTasksHolder" gets initialized as document.getElementById("incomplete-tasks"); at line 6

"completedTasksHolder" gets initialized as document.getElementById("completed-tasks"); at line 7

I set two variables at lines 8 and 9 ($incomplete and $complete) so that I could retain the initial values of "incompleteTasksHolder" & "completedTasksHolders" they look like this:

    <!-- $incomplete -->
    <ul id=​"incomplete-tasks">
      ​<li>
        <input type=​"checkbox">
          ​<label>​Pay Bills​</label>
          ​<input type=​"text">
          ​<button class=​"edit">​Edit​</button>​
          <button class=​"delete">​Delete​</button>​
       </li>​
       <li class=​"editMode">​
         <input type=​"checkbox">​
         <label>​Go Shopping​</label>
         ​<input type=​"text" value=​"Go Shopping">
         ​<button class=​"edit">​Edit​</button>
         ​<button class=​"delete">​Delete​</button>​</li>​</ul>​

    <!-- $complete -->
    <li>
      <input type="checkbox" checked="">
      <label>See the Doctor</label>
      <input type="text">
      <button class="edit">Edit</button>
      <button class="delete">Delete</button>
    </li>

However when we get to line 134 "incompleteTasksHolder looks like this :

// incompleteTasksHolder
function () {
   console.log("Task Incomplete...");
   // when the checkbox is unchecked 
      // append the task to the #incompleted-tasks
}

and completedTasksHolder looks like this at line 139:

// completedTasksHolder
function () {
    console.log("Task Complete...");
   // When the check box is pressed
      // append the task to the #completed-tasks
}

Quite clearly I have missed something because it makes perfect sense that each of the variables in question will have an undefined .children element by the time lines 134 and 139 are processed since they have been reinitialized as anonymous functions() at lines 94 and 101 respectively.

    /*  94 */ var completedTasksHolder = function() {

    /* 101 */ var completedTasksHolder = function() {

    /* 134 */ for(var i = 0; i < incompleteTasksHolder.children.length; i+=1) {

    /* 139 */ for(var i = 0; i < completedTasksHolder.children.length; i+=1) {

This is probably way too confusing to deal with so I will shut up and give you the codepen lin

http://codepen.io/dhawkinson/pen/rxNprr