小开

最佳答案

这个答案是很久以前写的/接受的。从那时起，更好，更全面的答案和例子已经提交。你可以向下滚动来找到它们。以下是为后人保留下来的公认的原始答案。

new_row.className = "aClassName";

这里是MDN的更多信息:类名称

小开

下面是使用函数方法的工作源代码。

<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 a class while created!!!';
document.getElementById('dd').appendChild(newNode);
})();
</script>
</body>
</html>

小开

使用.classList.add()方法:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

<div class="foo"></div>

This method is better than overwriting the className property, because it doesn't remove other classes and doesn't add the class if the element already has it.

You can also toggle or remove classes using element.classList (see the MDN documentation).

小开

同样值得一看的是:

var el = document.getElementById('hello');
if(el) {
el.className += el.className ? ' someClass' : 'someClass';
}

小开

在JavaScript中向DOM元素中添加类的3种方法

有多种方法可以做到这一点。我将向您展示添加类的三种方法，并阐明每种方法的一些好处。

您可以使用任何给定的方法向元素中添加类，这是检查、更改或删除它们的另一种方法。

类名称方法-添加单个或多个类并删除或更改所有类的简单方法。
班级名册方式——操作类的方式;同时添加、更改或删除单个或多个类。它们可以在代码中的任何时候轻松更改。
DOM方式——当根据DOM模型编写代码时，这提供了一个更清晰的代码和类似于className方式的函数。

类名称方式

这是一种简单的方法，将所有类存储在一个字符串中。字符串可以很容易地更改或追加。

// Create a div and add a class
var new_row = document.createElement("div");
new_row.className = "aClassName";


// Add another class. A space ' ' separates class names
new_row.className = "aClassName anotherClass";
// Another way of appending classes
new_row.className = new_row.className + " yetAClass";

如果一个元素有单个类，检查它很简单:

// Checking an element with a single class
new_row.className == "aClassName" ;
if ( new_row.className == "aClassName" )
// true

删除所有类或更改它们非常容易

// Changing all classes
new_row.className = "newClass";


// Removing all classes
new_row.className = "";

当使用多个类时，搜索或删除单个类是困难的。你需要将类名称字符串分割成一个数组，逐个搜索它们，删除你需要的那个，并将所有其他的添加回你的元素中。班级名册方式解决了这个问题，即使类被设置为类名称方式，也可以使用它。

班级名册方式

在需要时操作类是很容易的。你可以随心所欲地添加、删除或检查它们!它可以与单个或多个类一起使用。

// Create a div and add a class
var new_row = document.createElement("div");
new_row.classList.add( "aClassName" );


// Add another class
new_row.classList.add( "anotherClass" );
// Add multiple classes
new_row.classList.add( "yetAClass", "moreClasses", "anyClass" );


// Check for a class
if ( new_row.classList.contains( "anotherClass" ) )
// true


// Remove a class or multiple classes
new_row.classList.remove( "anyClass" );
new_row.classList.remove( "yetAClass", "moreClasses" );


// Replace a class
new_row.classList.replace( "anotherClass", "newClass" );


// Toggle a class - add it if it does not exist or remove it if it exists
new_row.classList.toggle( "visible" );

使用类名称的方法更容易删除所有类或更改为单个类。

DOM方式

如果你以DOM的方式编写代码，这看起来更干净，并通过设置class属性将类存储在字符串中。

// Create a div, add it to the documet and set class
var new_row = document.createElement( "div" );
document.body.appendChild( new_row );
new_row.setAttribute( "class", "aClassName anotherClass" );


// Add some text
new_row.appendChild( document.createTextNode( "Some text" ) );


// Remove all classes
new_row.removeAttribute( "class" );

当使用单个类时，检查类很简单

// Checking when a single class is used
if ( new_row.hasAttribute( "class" )
&& new_row.getAttribute( "class" ) == "anotherClass" )
// true

当使用多个类时检查或删除单个类使用与类名称相同的方法。但是班级名册方式更容易实现这一点，并且可以使用，即使你设置为DOM方式。

小开

var newItem = document.createElement('div');
newItem.style = ('background-color:red');
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

小开

如果你想创建一个新的输入字段，例如file类型:

 // Create a new Input with type file and id='file-input'
var newFileInput = document.createElement('input');


// The new input file will have type 'file'
newFileInput.type = "file";


// The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
newFileInput.className = "w-95 mb-1"

输出将是:<input type="file" class="w-95 mb-1">

如果你想使用JavaScript创建一个嵌套标签，最简单的方法是使用innerHtml:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

输出将是:

<li>
<span class="toggle">Jan</span>
</li>

小开

跨浏览器的解决方案

注意:classList属性在Internet Explorer 9中不支持。以下代码可以在所有浏览器中运行:

function addClass(id,classname) {
var element, name, arr;
element = document.getElementById(id);
arr = element.className.split(" ");
if (arr.indexOf(classname) == -1) { // check if class is already added
element.className += " " + classname;
}
}


addClass('div1','show')

来源:如何js添加类

小开

var new_row = document.createElement('div');


new_row.setAttribute("class", "YOUR_CLASS");

这将工作;-)

source

小开

如果要创建很多元素，您可以创建自己的基本createElementWithClass函数。

function createElementWithClass(type, className) {
const element = document.createElement(type);
element.className = className
return element;
}

非常基本的我知道，但能够调用以下是少混乱。

const myDiv = createElementWithClass('div', 'some-class')

而不是很多

 const element1 = document.createElement('div');
element.className = 'a-class-name'

一遍又一遍。

小开

<script>
document.getElementById('add-Box').addEventListener('click', function (event) {
let itemParent = document.getElementById('box-Parent');
let newItem = document.createElement('li');
newItem.className = 'box';
itemParent.appendChild(newItem);
})
</script>

小开

如果你想在一个方法中创建多个元素。

function createElement(el, options, listen = [], appendTo){
let element = document.createElement(el);
Object.keys(options).forEach(function (k){
element[k] = options[k];
});
if(listen.length > 0){
listen.forEach(function(l){
element.addEventListener(l.event, l.f);
});
}
appendTo.append(element);
}




let main = document.getElementById('addHere');
createElement('button', {id: 'myBtn', className: 'btn btn-primary', textContent: 'Add Alert'}, [{
event: 'click',
f: function(){
createElement('div', {className: 'alert alert-success mt-2', textContent: 'Working' }, [], main);
}
}], main);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div id="addHere" class="text-center mt-2"></div>

如何在JavaScript中添加类到DOM元素?

在JavaScript中向DOM元素中添加类的3种方法

类名称方式

班级名册方式

DOM方式

跨浏览器的解决方案