Trying to convert jquery into vanilla js

Question

Following along with an online course learning Javascript and the course itself is using jQuery for a todo list, however knowing ES6 supports everything jQuery does in the script itself, I'm trying to convert jQuery into vanilla JS, however task.append(elem); isn't working.

In jQuery the instructor uses:

let addButton = $(".add-button");
let field = $(".add-field");
let task = $(".tasks");

addButton.on("click", function(){
  let elem = `<li class="task">
    <div class="task-checked col-1">
      <input type="checkbox">
    </div>
    <div class="task-text col-2">${class.val()}</div>
    <div class="task-remove col-3"></div>
  </li>`;

  $('.task').append(elem);
});

My understanding of current ES standards have replaced jQuery with:

let addButton = document.querySelector(".add-button");
let field = document.querySelector(".add-field");
let task = document.querySelectorAll(".tasks");

addButton.addEventListener("click", function(){
  let elem = `<li class="task">
    <div class="task-checked col-1">
      <input type="checkbox">
    </div>
    <div class="task-text col-2"></div>
    <div class="task-remove col-3"></div>
  </li>`;

  task.append(elem);
});

My understanding is that by calling task.append(elem); it should have a similar function to the instructor's code, but for some reason when I click on the add button it isn't adding a new task, unlike the video example. It is probably something basic I'm missing but I'm wanting to get a grasp of Vanilla JS before branching into frameworks. Thank you