Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Bootstrap creating elements via javascript

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);
like image 455
SamT Avatar asked Feb 21 '16 15:02

SamT


People also ask

Can I use JavaScript with Bootstrap?

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.

Does Bootstrap uses HTML CSS and JavaScript?

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.

Is Bootstrap a CSS or JavaScript?

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.


1 Answers

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>
like image 157
Zakaria Acharki Avatar answered Sep 22 '22 21:09

Zakaria Acharki