“classList.add”不会将类添加到 div 和表单元素答案

【问题标题】："classList.add" doesn't add a class to a div and a form elements“classList.add”不会将类添加到 div 和表单元素
【发布时间】：2021-09-06 09:11:21
【问题描述】：

我目前偶然发现了无法通过 classList.add 方法将类添加到 div/form 元素的问题。同样的方法也适用于其他元素，如输入或按钮。但是，div 和表单并没有发生什么神奇的事情。

请忽略 JS 代码在 HTML 中的外部链接。这两条线不起作用的所有重要事项：

form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";

(function(){
  function formCreation () {
   //Here I add elements"
    let container = document.createElement('div');
    let form = document.createElement('form');
    let input = document.createElement('input');
    let buttonWrapper= document.createElement('div');
    let buttonCreator = document.createElement('button');
    let buttonRemover = document.createElement('button');

    input.placeholder = 'Enter your new task';
    buttonRemover.textContent = 'Delete'
    buttonCreator.textContent = 'Add';

    //Here I'm trying to add classess//
    form.classList.add = "form";
    //It won't work for the form'
    buttonWrapper.classList.add = "buttonContainer";
    //Neither it would work for the buttonWraper div"
    input.classList.add('input');
    buttonCreator.classList.add('creator');
    buttonRemover.classList.add('remover')


    container.append(form);
    buttonWrapper.append(buttonCreator);
    buttonWrapper.append(buttonRemover);
    form.append(input);
    form.append(buttonWrapper);
    
    return {
      form,
      input,
      buttonCreator,
    };
  }

 
  document.addEventListener('DOMContentLoaded', function () {
    let containerApp = document.getElementById('container');

    let heading = createAppTitle('Things to be done');
    let todoItem = formCreation();
    let listItself = todoListCreator();

    containerApp.append(heading);
    containerApp.append(todoItem.form);
    containerApp.append(listItself);

  });

}());

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="container" class="container"></div>
  <script src="index.js"></script>
</body>
</html>

【问题讨论】：

这是您需要调用的方法，而不是您必须分配给的设置器。查看代码中正确执行该方法的其他用法（例如buttonCreator.classList.add('creator');）。

标签： javascript css class dom

【解决方案1】：

我不明白这段代码如何在任何元素类型上工作。

格式：

form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";

错了。

试试

form.classList.add("formList");
buttonWrapper.classList.add("buttonContainer");

有关使用 classList 及其属性的信息，请参阅 MDN。

【讨论】：

可能是 (2) 个错字或误解。
在他们正确编写之后的行中......