跨浏览器解决方案

Question

如何为div添加课程？

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

Answer 1

new_row.className = "aClassName";

关于MDN的更多信息：className

Answer 2

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

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

Answer 3

使用.classList.add()方法：

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

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

这种方法最好覆盖className属性，因为它不会删除其他类，并且如果元素已经拥有它，则不会添加该类。

您还可以使用element.classList切换或删除课程（请参阅MDN docs）。

Answer 4

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

Answer 5

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

一遍又一遍。

Answer 6

如果你想用一种方法创建多个元素。

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>

Answer 7

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

Answer 8

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

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

这将起作用;-）

source

Answer 9

另外值得一看

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

Answer 10

如果您想使用例如file类型创建新的输入字段

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

 // New input file will have type file
 newFileInput.type = "file"; 

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

Answer 11

跨浏览器解决方案

注意： 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')

来源：how to js add class

Answer 12

这是更好的方法

let new_row = document.createElement('div');
new_row.setAttribute("class", "classname");
new_row.setAttribute("id", "idname");

Answer 13

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

Answer 14

这也有效。

$(document.createElement('div')).addClass("form-group")

如何在JavaScript中向DOM元素添加类？

14 个答案:

跨浏览器解决方案