Javascript 将样式应用于动态创建的复选框

我有一系列的复选框，这些复选框是我从引导程序中获得的，它们看起来更像是按钮而不是复选框，但是它们的选中状态仍然会在单击时切换。我在表单上有一个文本输入，允许用户添加复选框，其中包含与用户输入相对应的标签和值。所有复选框都位于相同的

div

组件中

我使用javascript动态创建新复选框并将其附加到

标签

，该标签被附加到包含复选框的

div

。新复选框出现在页面上，但没有样式，样式链接在html文档的头部。如何将样式应用于新复选框

下面是我正在使用的javascript：

function addRestriction() {
                let userInput = document.getElementById("add_other").value; // get user input
                let newBox = document.createElement("input");
                newBox.type = "checkbox";
                newBox.autocomplete = 'off';
                newBox.name = 'diet_button';
                newBox.value = userInput;
                let newLabel = document.createElement("label");
                newLabel.class = "btn btn-outline-secondary active";
                newLabel.appendChild(newBox);
                newLabel.appendChild(document.createTextNode(userInput));
                document.getElementById('diet_restrictions').appendChild(newLabel);
                document.getElementById('add_other').value = '';
            }

---

两个答案都是正确的：

element.className = "new-class"

将仅此元素的类名设置为“新类” 而：

将向已存在的类集添加新类。如果要在新创建的复选框中进一步扩展类，此功能可能很有用

显示差异

---

尝试newLabel.className=“btn btn大纲辅助活动”；在类中添加新元素将立即应用所有CSS。您确定类名、元素层次结构和CSS规则正确匹配吗？使用F12开发工具来找到答案。如果页面上的复选框是静态的呢？还没有应用样式吗？使用样式的任何其他元素？element.class使用className或classList.add（）都是错误的==>更改为

newLabel.className=“btn btn大纲辅助激活”或
newLabel.classList.add（“btn”、“btn大纲辅助”、“活动”）谢谢！这起作用了。有点奇怪的是，设置class属性的字段不仅仅是class，而且很好。
element.classList.add("new-class")