CSS Bootstrap creating elements via javascript

Question

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);

TheHaloDeveloper · Accepted Answer · 2021-10-27 08:36:17Z

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>

RDK · Accepted Answer · 2019-09-29 18:48:30Z

0

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

answered Sep 29, 2019 at 18:48

RDK

1531 gold badge1 silver badge13 bronze badges

Comments

Mahdi Safari · Accepted Answer · 2020-04-24 07:39:57Z

This is simplly add bootstrap form-controll using javascript by clicking a button
HTML Bootstrap form input

<div id="dynamicInput">
    <div class="form-group" >
        <div class="input-group">
             <div class="input-group-prepend">
                  <span class="input-group-text">
                     1.
                  </span>
              </div>
        <input type="text" class="form-control" name="subjects" value="{{old('subjects') }}" id="learn" placeholder="They will learn..">
      </div>
    </div>
 </div>
<button type="button" onclick="addInput('dynamicInput');" class=" btn btn-primary ml-5">Add more &nbsp;&nbsp;<i class="fa fa-plus"></i></button>

And Javascripts

var counter = 1;

function addInput(divName){

  var group = document.createElement('div');
  group.className = 'form-group';
  var inputGroup = document.createElement('div');
  inputGroup.className = 'input-group';
  var inputGroupPre = document.createElement('div');
  inputGroupPre.className = 'input-group-prepend';
  var inputGroupText = document.createElement('span');
  inputGroupText.className = 'input-group-text';
  inputGroupText.innerHTML = counter + 1 +".";
  var input = document.createElement('input');
  input.className = 'form-control';
  input.type = 'text';
  input.name = 'subjects[]';
  input.placeholder = 'what they will learn';
  name='myInputs[]'>";

   //Appending elements
   document.getElementById(divName).appendChild(group);
   group.appendChild(inputGroup);
   inputGroup.appendChild(inputGroupPre);
   inputGroup.appendChild(input);
   inputGroupPre.appendChild(inputGroupText);
   counter++;

}

TheHaloDeveloper · Accepted Answer · 2021-12-13 15:50:21Z

0

Did you load in jQuery and Bootstrap scripts before this script. Also the Bootstrap css? Also, if you really want to create the HTML from scripts, I believe its better to use jQuery - since you already should have it loaded. just put everything in the $( document ).ready() function.

edited Dec 13, 2021 at 15:50

TheHaloDeveloper

3,1251 gold badge13 silver badges36 bronze badges

answered Feb 21, 2016 at 15:42

Mihai Farcas

1191 silver badge7 bronze badges

Collectives™ on Stack Overflow

CSS Bootstrap creating elements via javascript

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related