Как добавить класс в элемент DOM в JavaScript?

Как добавить класс для div?

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

ОТВЕТЫ

Ответ 1

new_row.className = "aClassName";

Heres больше информации о MDN: className

Ответ 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>

Ответ 3

Существует также способ DOM сделать это в JavaScript:

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

Ответ 4

Чтобы изменить атрибут class для элемента HTML, используйте element.className:

const element = document.createElement('div');
element.className = 'foo';

Недостатком этого решения является то, что он полностью переопределяет атрибут class. Конечно, вы можете добавить class с помощью оператора += (element.className += " bar"), но если этот элемент уже имеет этот класс, он будет излишне удвоен. Если вы хотите добавить class в элемент, который уже имеет некоторые классы, например. <div class="foo"></div>, IMHO лучшим решением было бы использовать element.classList. Он имеет метод add(), который позволяет добавлять класс к элементу:

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

Вы также можете переключать или удалять классы с помощью element.classList. К сожалению, он не поддерживается IE <= 9 и частично поддерживается IE 10 и 11. См. таблица поддержки на caniuse.com. Однако существует shim, который работает для IE >= 8.

Ответ 5

Также стоит взглянуть на

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

Ответ 6

Это также сработает.

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

Ответ 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]);