253

Як додати клас для div?

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

javascript dom

— Ого
джерело

6

Шкода, що специфікація не дозволяє класам визначатись як параметр createElement.

— Гаʀʀʏ

Якщо ви хочете додати клас, не видаляючи інших класів , дивіться цю відповідь .

— Michał Perłakowski

447

new_row.className = "aClassName";

Ось додаткова інформація про MDN: className

— Darko Z
джерело

5

як щодо встановлення кількох назв класів?

— Саймон

5

@Sponge - new_row.className = "aClassName1 aClassName2";це лише атрибут, ви можете призначити будь-який вподобаний вам рядок, навіть якщо це робить недійсний html

— Darko Z

16

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

— StevenTsooo

@StevenTsooo Примітка, яка classListне підтримується в IE9 або нижче.

— денулолі

Чи є спосіб створити елемент з назвою класу в одному рядку коду - і все ж отримати посилання на елемент? наприклад: 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 / ванільний 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?

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