Динамическое создание HTML элементов с Bootstrap классами через JavaScript

Оффтоп javascript
1

Привет всем! У меня проблема с созданием HTML элементов через JavaScript. Пытаюсь динамически создать форму с Bootstrap стилями, но классы почему-то не применяются.

Вот если бы я хотел получить следующий HTML код:

<div class="form-group">
  <label for="userInput" class="col-md-3 control-label">Описание</label>
  <div class="col-md-9">
     <textarea class="form-control" rows="4" id="userInput" placeholder="Введите ваше описание"></textarea>
  </div>
</div>

Вот мой JavaScript код:

var container = document.createElement('div');
container.class = 'form-group';
var labelElement = document.createElement('label');
labelElement.class = 'col-md-3 control-label';
labelElement.innerHTML = 'Описание';
labelElement.for = 'userInput';
var wrapperDiv = document.createElement('div');
wrapperDiv.class = 'col-md-9';
var textArea = document.createElement('textarea');
textArea.class = 'form-control';
textArea.id = 'userInput';
textArea.rows = '4';
textArea.placeholder = 'Введите ваше описание';
container.appendChild(labelElement);
wrapperDiv.appendChild(textArea);
container.appendChild(wrapperDiv);

Не могу понять, в чем проблема, так как элементы создаются, но стили Bootstrap не применяются. Помогите, пожалуйста!

2

Проблема в .class — нужно использовать .className. В JavaScript это element.className = 'твой-класс'. Замените все .class на .className, и всё заработает. Также не забудьте заменить .for на .htmlFor.

3

Была такая же проблема пару месяцев назад! Проще всего через classList.add() - container.classList.add('form-group'), а для нескольких классов labelElement.classList.add('col-md-3', 'control-label'). Гораздо читабельнее className, особенно с несколькими классами. И потом легко удалять через classList.remove() или проверять через classList.contains().

4

Можно также использовать setAttribute(). Например: container.setAttribute('class', 'form-group') или textArea.setAttribute('id', 'userInput'). Это работает для любых атрибутов. Мне часто проще так делать, чем запоминать все эти htmlFor, className и другие исключения. Работает стабильно везде.