如何通过javascript动态创建bootstrap面板？

Question

我在动态创建 Bootstrap 面板时遇到问题，该面板包含 "Day Schedule Info"... 我尝试在以下代码的帮助下完成它，但它没有按照我想要的方式正常工作

HTML

<div class="col-md-6 it-right-side pull-right">
                            <div>
                                <div class="col-md-12" id="dynamicInput">
                                    <!--Start Panel-->
                                    <div class="panel-group" id="accordion">
                                        <div class="panel panel-info">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                                        Day 1
                                                        <i class="fa fa-plus pull-right" aria-hidden="true"></i>
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse1" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    {{--Schedule--}}
                                                    <div class="row">
                                                        <div class="col-md-12 sch-box">
                                                            <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
                                                            <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
                                                            <div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
                                                            <div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn center-block"><i class="fa fa-plus"></i> </button>

                                        </div>
                                        <button type="button" class="btn center-block" onClick="addInput('dynamicInput');"><i class="fa fa-plus"></i> </button>
                                    </div>
                                </div>
                                <!--End panel-->

                                </div>
                            </div>

JAVASCRIPT

 <script>
    var counter = 1;
    var limit = 6;
    function addInput(divName){
        if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
        }
        else {
            var newdiv = document.createElement('panel');
            newdiv.innerHTML = '<div class="panel panel-info">' +
                    '<h4 class="panel-title">' +
                    '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
                    '</div> ' +
                    '<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse">' +
                    '<div class="panel-body">' +
                    '<div class="row">' +
                    '<div class="col-md-12 sch-box">' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]">' +
                    '</div>' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea>' +
                    '</div></div></div></div></div>';
            document.getElementById(divName).appendChild(newdiv);
            counter++;
        }
    }
</script>

Answer 1

您应该创建 div 元素（不是面板）。

var newdiv = document.createElement('div');

你忘记了 .panel-heading div.

'<div class="panel panel-info">' + '<div class="panel-heading">'

CODEPEN

Answer 2

我对你的脚本做了一些修改。这里我使用 jquery 函数来追加。也没有您要创建的元素 'panel'。

 <script type="text/javascript">
    var counter = 1;
    var limit = 6;
    function addInput(divName) {
        if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
        }
        else {
            newdiv = '<div class="panel panel-info">' +
                    '<h4 class="panel-title">' +
                    '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
                    '</div> ' +
                    '<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse">' +
                    '<div class="panel-body">' +
                    '<div class="row">' +
                    '<div class="col-md-12 sch-box">' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]">' +
                    '</div>' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea>' +
                    '</div></div></div></div></div>';

            $("#" + divName).append(newdiv);
            counter++;
        }
    }
  </script>

如何通过javascript动态创建bootstrap面板？

how to create bootstrap Panel dynamically through javascript?

html

javascript

panel

twitter-bootstrap

CODEPEN