CSS Bootstrap 通过 javascript 创建元素

Question

我正在尝试通过javascript创建以下HTML代码。由于某种原因，引导类没有应用于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);

Answer 1

由于某种原因，引导类没有应用于javascript代码

那因为没有函数class，所以你应该使用className，检查下面的工作片段。

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>

Answer 2

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

Answer 3

这是通过单击按钮
使用 javascript 简单地添加引导表单控制HTML 引导表单输入

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

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

Answer 4

在此脚本之前，您是否加载了 jQuery 和 Bootstrap 脚本。还有引导 css？另外，如果你真的想从脚本创建HTML，我相信最好使用jQuery - 因为你已经加载了它。只需将所有内容都放在$( document ).ready()函数中即可。