Question

紧随在线课程学习Javascript之后，该课程本身将jQuery用于待办事项列表，但是知道ES6支持jQuery本身在脚本中所做的所有工作，因此我试图将jQuery转换为原始JS，但是{{1 }}无法正常工作。

在jQuery中，讲师使用：

task.append(elem);

我对当前ES标准的理解已将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);
});

我的理解是，调用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); });应该具有与讲师代码相似的功能，但是由于某些原因，当我单击添加按钮时，它并没有添加新任务，这与视频示例不同。这可能是我缺少的基本知识，但是我想在分支到框架之前掌握Vanilla JS。谢谢

尝试将jquery转换为普通js

0 个答案: