I am trying to create the following HTML code via javascript. For some reason, the bootstrap classes are not getting applied to the 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 m trying to create this HTML using javascript as 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);
All Bootstrap's JavaScript files depend on util. js and it has to be included alongside the other JavaScript files. If you're using the compiled (or minified) bootstrap. js , there is no need to include this—it's already there.
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
For some reason, the bootstrap classes are not getting applied to the javascript code
That because there's no function class
, you should use className
, check working snippet bellow.
div.className = 'form-group';
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With