gpt4 book ai didi

javascript - CSS Bootstrap 通过 javascript 创建元素

转载 作者:太空狗 更新时间:2023-10-29 15:00:35 24 4
gpt4 key购买 nike

我正在尝试通过 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);

最佳答案

For some reason, the bootstrap classes are not getting applied to the javascript code

那是因为没有函数 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>

关于javascript - CSS Bootstrap 通过 javascript 创建元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35538057/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com