Step 3: add a new task

The first thing we are going to do is to take control of the task list; we will use JavaScript for adding a new task.

Before </body>, let’s add this:

3.1 — The <script> tag

<script>
  let listElement = document.querySelector('#task-list');
  let element = document.createElement('li');
  element.innerHTML = 'Disco dance';
  listElement.appendChild(element);
</script>

If we reload the page now, we will see a new task pop up in our list and it comes straight from JavaScript!

What we just did:

• We used the document.querySelector() DOM API to access our #task-list element

• We modified its innerHTML property by adding some more HTML: our new task item