如何通过JavaScript动态创建Bootstrap面板？

Question

我遇到了一个问题，需要动态创建Bootstrap面板，其中包含“日程安排信息”的表单...

我尝试使用以下代码来实现，但它不能按照我想要的方式正确地工作。

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>

- Jamal Ahmad

Answer 1

1. 你应该创建一个div元素（而不是面板）。

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

2. 你忘记了 .panel-heading div。

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

CODEPEN

- max

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>

- Srinivas