带有类的 document.createElement('div') [重复]答案

【问题标题】：document.createElement('div') with a class [duplicate]带有类的 document.createElement('div') [重复]
【发布时间】：2019-08-09 00:16:52
【问题描述】：

我可以使用 createElement() 通过 JavaScript 创建一个 HTML 元素，如下所示：

let div = document.createElement('div');

但是如何向新创建的 div 添加 CSS 类？

我尝试了类似的方法，但没有奏效：

let div = document.createElement('div class=myDiv');

【问题讨论】：

如果你的新div将被添加到DOM中，你也可以使用HTML标记来描述它，然后.insertAdjacentHTML创建并添加它。 var html = "<div class=myDiv></div>"; targetElement.insertAdjacentHTML("beforeend", html); 该方法为您提供了相对于您可以添加到 DOM 的目标的 4 个位置。有关详细信息，请参阅文档。
这个问题还是要回答的。它不是提议的副本。这个问题希望在同一行中添加类名。副本只是想添加一个类名。

标签： javascript css

【解决方案1】：

做div.classList.add

let div = document.createElement('div');
div.classList.add('test');
let text = document.createTextNode('Test');
div.appendChild(text);
document.body.appendChild(div)

.test {
  color: green;
}

您也可以通过className进行操作

let div = document.createElement('div');
div.className = 'test';
let text = document.createTextNode('Test');
div.appendChild(text);
document.body.appendChild(div)

.test {
  color: red;
}

【讨论】：

【解决方案2】：

您可以使用Element.classList.add

let div = document.createElement('div');
div.classList.add("myDiv")

【讨论】：