CSS Bootstrap creating elements through javascript

Question

I am trying to create the following HTML code through javascript. For some reason, bootstrap classes are not applied to javascript code. Any help please?

<div class="form-group">
  <label for="inputText" class="col-sm-2 control-label">Comments</label>
  <div class="col-sm-10">
     <textarea class="form-control" rows = "3" id="inputText"  placeholder="Write your comments here"></textarea>
  </div>
</div>

I am trying to create this HTML using javascript as shown below. Not sure what I am missing.

var div = document.createElement('div');
div.class = 'form-group';
var label = document.createElement('label');
label.class = 'col-sm-2 control-label';
label.innerHTML = 'Comments';
label.for = 'inputText';
var div1 = document.createElement('div');
div1.class = 'col-sm-10';
var commentText = document.createElement('textarea');
commentText.class = 'form-control';
commentText.id = 'inputText';
commentText.rows = '3';
commentText.placeholder = 'Write your comments';
div.appendChild(label);
div1.appendChild(commentText);
div.appendChild(div1);

Answer 1

For some reason, bootstrap classes do not apply to javascript code

This is because there is no function classyou should use className, check the working snapshot below.

div.className = 'form-group';

Hope this helps.

---

var div = document.createElement('div');
div.className = 'form-group';
var label = document.createElement('label');
label.className = 'col-sm-2 control-label';
label.innerHTML = 'Comments';
label.for = 'inputText';
var div1 = document.createElement('div');
div1.className = 'col-sm-10';
var commentText = document.createElement('textarea');
commentText.className = 'form-control';
commentText.id = 'inputText';
commentText.rows = '3';
commentText.placeholder = 'Write your comments';
div.appendChild(label);
div1.appendChild(commentText);
div.appendChild(div1);

document.body.appendChild(div);

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Run code

Answer 2

jQuery Bootstrap script. Bootstrap css? , HTML- , , jQuery - . $( document ).ready(). , !

Answer 3

You can also use element.classList.add('custom-class')to add a class name to a class attribute.