创建一个按钮并使用 javascript 设置它的类答案

【问题标题】：create a button and set its class using javascript创建一个按钮并使用 javascript 设置它的类
【发布时间】：2020-07-21 20:12:33
【问题描述】：

我正在尝试在 JavaScript 中创建一个待办事项列表，其中列表是在提交输入时动态创建的。我想要的是任务列表和除它们之外的删除按钮。除了我无法向其中添加类之外，一切都已完成使用 javascript 的按钮。

这是我的代码..

<button id="add" onclick="takeInput()">Add new task</button>

<script>
function takeInput()
{
  var task=prompt("Enter the new to do work");
  if(task!=null)
  {
    var list=document.createElement("li");
    var btn=document.createElement("button");
    var data=document.createTextNode(person);
    var btndata=document.createTextNode("delete");
    list.appendChild(data);
    btn.appendChild(btndata);
    document.getElementById("list").appendChild(list);
    document.getElementById("list").appendChild(btn);

  }
}
</script>

【问题讨论】：

标签： javascript dom dom-manipulation

【解决方案1】：

您可以像这样向动态创建的按钮添加一个类：

....
var btn=document.createElement("button");
btn.className = "YourClass"; 
//OR
btn.className += " YourClass" //If you want to add to existing classes
....

【讨论】：

【解决方案2】：

将类添加到您可以使用的任何 html 元素。

element.className += " newClass";

这将保留以前的课程并添加新课程。

在你的情况下，它会像（如果你想为你新创建的按钮添加类）

btn.className += " newClass";

如果你不想要上一堂课。（在你的情况下没有）

btn.className = "newClass";

【讨论】：

【解决方案3】：

您可以使用classList.Add 这是一个示例：

btn0.classList.add('btn');
btn0.classList.add('btn-sm');
btn0.classList.add('btn-primary');

【讨论】：