<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>

使用.classList.add()方法:

const element = document.querySelector('div.foo'); element.classList.add('酒吧'); console.log (element.className); < div class = " foo " > < / div >

这个方法比覆盖className属性更好，因为它不会删除其他类，如果元素已经有该类，也不会添加该类。

您还可以使用element切换或删除类。classList(参见MDN文档)。

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

new_row.className = "aClassName";

这里有更多关于MDN: className的信息

跨浏览器的解决方案

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

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中添加类

如果要创建很多元素，您可以创建自己的基本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'

一遍又一遍。