html - how to create bootstrap Panel dynamically through javascript? - Stack Overflow

admin管理员组

文章数量:1431037

I am experiencing a problem to create Bootstrap Panel dynamically and that panel contains a form for the "Day Schedule Info"... I tried to do it with the help of the following code but it is not working correctly the way I want

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>

I am experiencing a problem to create Bootstrap Panel dynamically and that panel contains a form for the "Day Schedule Info"... I tried to do it with the help of the following code but it is not working correctly the way I want

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>

• javascript
• html
• twitter-bootstrap
• panel

Share Improve this question Follow edited Feb 3, 2017 at 8:21 neophyte 6,63422 gold badges3131 silver badges4343 bronze badges asked Feb 3, 2017 at 7:12 Jamal AhmadJamal Ahmad 72133 gold badges1111 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

1. You should create div element (not panel).

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

2. You forgot .panel-heading div.

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

CODEPEN

I did some changes to your script. Here i am using jquery function to append. Also there is no such element 'panel' which you are trying to create.

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

本文标签： htmlhow to create bootstrap Panel dynamically through javascriptStack Overflow