CSS Bootstrap通过JavaScript创建元素

Question

我正在尝试通过javascript创建以下HTML代码。但奇怪的是，bootstrap类没有应用到javascript代码中。请问有什么帮助吗？

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

我正在尝试使用以下JavaScript创建此HTML。不确定我缺少什么。

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

- SamT

Answer 1

由于某些原因，引导程序类未被应用于JavaScript代码

这是因为没有class函数，您应该使用className，请查看下面的工作片段。

```html // 原代码

Content

// 修改后的代码

Content

```

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>

- Zakaria Acharki

Answer 2

在运行此脚本之前，您是否已经加载了jQuery和Bootstrap脚本？还有Bootstrap的CSS文件吗？另外，如果您真的想要使用脚本创建HTML，我认为最好使用jQuery - 因为您应该已经加载了它。只需将所有内容放入$( document ).ready()函数中即可。

- Mihai Farcas

Answer 3

我们也可以使用element.classList.add('custom-class')将类名附加到类属性中。

- RDK

Answer 4

这是通过点击按钮使用JavaScript简单添加Bootstrap表单控件
HTML Bootstrap表单输入

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

还有JavaScript

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

}

- Mahdi Safari