在视口中添加元素时添加类

在Vanilla JavaScript中，我们可以使用DOM来在视口中添加元素，也可以使用classList来向元素添加或删除类。在这里，我们将讨论如何在视口中添加元素并为它们添加类。

使用document.createElement()方法创建HTML元素

可以使用document.createElement()方法来创建HTML元素。例如，要在页面中添加一个新的<button>元素可以使用以下代码：

const button = document.createElement('button');

创建元素后，可以添加属性和文本，并将其添加到DOM中。

使用classList.add()方法添加类

要在元素上添加类，我们可以使用classList.add()方法。例如，以下代码将在新的button元素上添加一个名为“btn”的类：

button.classList.add('btn');

完整的示例

以下是在视口中创建新的button元素并将其添加到body元素中，然后在该元素上添加名为“btn”的类的JavaScript示例代码：

const button = document.createElement('button');
button.textContent = 'Click me!';
button.classList.add('btn');
document.body.appendChild(button);

这将在视口中创建一个新按钮，并为该按钮添加一个名为“btn”的类，然后将其添加到body元素中。

结束语

在Vanilla JavaScript中向元素添加类非常简单，并且可以与创建新元素进行组合使用。我们可以使用classList.add()方法为元素添加一个或多个类，并且可以使用document.createElement()方法创建HTML元素并将其添加到DOM中。