253

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

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

javascript dom Вот это да
источник

6

Жаль, что спецификация не позволяет указывать классы в качестве параметра для createElement.

Gaʀʀʏ

Если вы хотите добавить класс без удаления других классов , посмотрите этот ответ .

Михал Перлаковский

447

new_row.className = "aClassName";

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

Darko Z
источник

5

как насчет установки нескольких имен классов?

Симон

5

@ Отталкивайте new_row.className = "aClassName1 aClassName2";это просто атрибут, вы можете назначить любую строку, которая вам нравится, даже если она делает для недействительного HTML

Darko Z

16

Я также рекомендовал бы, так new_row.classList.add('aClassName');как вы можете добавить несколько имен классов

StevenTsooo

@StevenTsooo Обратите внимание, что classListне поддерживается в IE9 или ниже.

Dayuloli

Есть ли способ создать элемент с именем класса в одной строке кода - и при этом получить ссылку на элемент? например: myEL = document.createElement ('div'). addClass ('yo') 'не будет работать.

Кокодоко

36

Используйте .classList.add()метод:

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

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

Развернуть фрагмент

Этот метод лучше, чем перезапись classNameсвойства, поскольку он не удаляет другие классы и не добавляет класс, если элемент уже имеет его.

Вы также можете переключать или удалять классы, используя element.classList(см. Документацию MDN ).

Михал Перлаковский
источник

28

Вот рабочий исходный код с использованием функционального подхода.

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

Санни СМ
источник

8

Так? Это служит примером, в этом нет ничего плохого.

Кэри,

Re «пока создано» : Вы имеете в виду «пока создается» ? Ответьте, отредактировав свой ответ , а не здесь в комментариях. Заранее спасибо.

Питер Мортенсен

Объяснение будет в порядке. Например, что вы подразумеваете под «функциональным подходом» ? Можете ли вы уточнить ( редактируя свой ответ , а не здесь, в комментариях)? Заранее спасибо.

Питер Мортенсен

15

Существует также 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);

Хассе Бьорк
источник

2

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

Диего Слингер
источник

2

Вы можете объяснить, почему вы опубликовали это, это поможет другим учиться.

Томас Смит

проголосовал, потому что это родной JavaScript / vanilla JavaScript и не требует каких-либо других библиотек или структур.

Оботезать

Объяснение будет в порядке.

Питер Мортенсен

1

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

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

Это будет работать ;-)

источник

PedroProgrammer
источник

Это не очень хорошее решение, так как этот подход работает не во всех браузерах. setAttribute поддерживается только 60% браузеров, используемых сегодня. caniuse.com/#search=setAttribute

Рага

0

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

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

Йони
источник

Объяснение будет в порядке.

Питер Мортенсен

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>

Миля Миятович
источник

0

Кросс-браузерное решение

Примечание. Это 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 добавить класс

Рави Маквана
источник

-3

Это тоже будет работать.

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

Мухаммед Авайс
источник

5

Только если вы используете jQuery.

Дэн Нгуен

1

Спасибо за публикацию, это сработало для меня, мне нужно решение jquery.

Midknyte

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

Ответы:

Кросс-браузерное решение