如何在JavaScript中添加一个类到DOM元素？
如何为div添加一个类？
var new_row = document.createElement('div');
new_row.className = "aClassName";
下面是更多关于MDN的信息： className
这里是使用函数方法工作的源代码。
<html> <head> <style> .news{padding:10px; margin-top:2px;background-color:red;color:#fff;} </style> </head> <body> <div id="dd"></div> <script> (function(){ var countup = this; var newNode = document.createElement('div'); newNode.className = 'textNode news content'; newNode.innerHTML = 'this created div contains class while created!!!'; document.getElementById('dd').appendChild(newNode); })(); </script> </body> </html>
在JavaScript中也有这样做的DOM方法：
// Create a div and set class var new_row = document.createElement("div"); new_row.setAttribute("class", "aClassName" ); // Add some text new_row.appendChild( document.createTextNode("Some text") ); // Add it to the document body document.body.appendChild( new_row );
要更改HTML元素的class属性，请使用element.className ：
const element = document.createElement('div'); element.className = 'foo';
这个解决scheme的缺点是它完全覆盖了class属性。 当然，你可以使用+= operator（ element.className += " bar" ）来添加class ，但是如果这个元素已经有了这个类，那么它就会被不必要的加倍。 如果你想添加class到已经有一些类的元素，例如<div class="foo"></div> ，恕我直言，最好的解决scheme是使用element.classList 。 它有add()方法，它允许你添加一个类到元素：
const element = document.querySelector('div.foo'); element.classList.add('bar');
您也可以使用element.classList来切换或移除类。 不幸的是，它不支持IE <= 9，只能部分支持IE 10和11.参见caniuse.com上的支持表 。 但是，有一个适用于IE> = 8的垫片 。
也值得一看
var el = document.getElementById('hello'); if(el) { el.className += el.className ? ' someClass' : 'someClass'; }
这也将起作用。
$(document.createElement('div')).addClass("form-group")
