Escape from The Console

Requirements

The requirements for this chapter:

• There should be an li element for every todo
• Each li element should contain .todoText
• Each li element should show .completed

Escape From The Console

In our app, we do not know how many items will be in the unordered list. Additionally, the items can change over time - i.e. delete an item or add an item etc. Thus, we need to dynamically add items to the list and delete items from the list.

But, first we need to know how to insert list items into the DOM. To do this, we will use JavaScript to dynamically insert list elements into the unordered list.

Console examples below…

Use a JS variable to dynamically create a LIST item:

• document.createElement()

> var todoLi = document.createElement('li');

> todoLi;
    <li></li>

Create a variable to grab or reference an element, in this case, the UNORDERED list element:

• document.querySelector()

> var todosUl = document.querySelector('ul');

> todosUl;
    <ul>
        </ul>

To append a node as the last child of a node, we use the following:

• appendChild()

> todosUl.appendChild(todoLi);
    <li></li>

TO BE CONTINUED…