我如何为div添加一个类?

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

当前回答

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


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

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

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

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

一遍又一遍。

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

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

这将工作;-)

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]);