时间戳

首页 > 解决方案 > 试图将 jquery 转换为 vanilla js

javascript - 试图将 jquery 转换为 vanilla js

问题描述

随着在线课程学习 Javascript 和课程本身使用 jQuery 作为待办事项列表，但是知道 ES6 支持 jQuery 在脚本本身中所做的一切，我正在尝试将 jQuery 转换为 vanilla JS，但是task.append(elem);不起作用。

在 jQuery 中，讲师使用：

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

我对当前 ES 标准的理解已将 jQuery 替换为：

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

我的理解是，通过调用task.append(elem);它应该具有与讲师代码类似的功能，但是由于某种原因，当我单击添加按钮时，它并没有添加新任务，这与视频示例不同。这可能是我缺少的基本内容，但我想在分支到框架之前掌握 Vanilla JS。谢谢

标签： javascript

解决方案

推荐阅读