实现div动态添加

实现效果：

image.png
image.png

实现代码如下：
html

                                        <!--记录面板-->
                                        <div class="panel_style">
                                            <div class="layui-row layui-col-space15">
                                                <div class="card_style">
                                                    <div class="layui-card">
                                                        <div>
                                                            <span>&nbsp;</span>
                                                            <button type="button" id="addretestRecord"
                                                                    class="layui-btn layui-btn-xs "
                                                                    style="float: right">
                                                                <span class="glyphicon glyphicon-plus"
                                                                      aria-hidden="true"></span>
                                                            </button>
                                                        </div>
                                                        <div class="layui-card-header">
                                                            <label class="record_label">测试日期</label>
                                                            <input id="datechoice1" type="text"
                                                                   class="edittestRecord  datechoice"
                                                                   name="test_start_date">
                                                        </div>
                                                        <div><span>&nbsp;</span></div>
                                                        <div class="layui-card-body">
                                                            <div class="form-group">
                                                                <label class="record_label">进度</label>
                                                                <input class="edittestRecord" type="text"/>
                                                                <label class="record_label">未解决bug</label>
                                                                <input class="edittestRecord" type="text"/>
                                                                <label class="record_label">已解决bug</label>
                                                                <input class="edittestRecord" type="text"/>
                                                                <label class="record_label">后台 bug</label>
                                                                <input class="edittestRecord" type="text"/>
                                                                <label class="record_label">IOS bug</label>
                                                                <input class="edittestRecord" type="text"/>
                                                                <label class="record_label">Android bug</label>
                                                                <input class="edittestRecord" type="text"/>
                                                                <label class="record_label">H5 bug</label>
                                                                <input class="edittestRecord" type="text"/>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="record_label">备注</label>
                                                                <textarea
                                                                        class="form-control record_textarea "></textarea>
                                                            </div>
                                                            <div class="form-group">
                                                                <input id="addmergetestRecords" type="text"
                                                                       style="display:None" name="headers"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

js

<script type="text/javascript">
    var add = document.getElementById('addtestRecord');
    var container_test = document.getElementById('container_test');
    var node_test = container_test.nextSibling;
    add.onclick = function () {
        oDiv = document.createElement('div');
        var dateChoiceSize = $('.datechoice').length +1;
        var dateChoiceId = "datechoice"+dateChoiceSize;

        oDiv.innerHTML = "<div class=\"panel_style\">\n" +
            "                                        <div class=\"layui-row layui-col-space15\">\n" +
            "                                            <div class=\"card_style\">\n" +
            "                                                <div class=\"layui-card\">\n" +
            "                                                    <div>" +
            "                                                        <span>&nbsp;</span>" +
            "                                                    <div class=\"layui-card-header\">\n" +
            "                                                        <label class = \"record_label\" >测试日期</label>\n" +
            "                                                        <input  id=\""+dateChoiceId+"\" type=\"text\" class=\"edittestRecord  datechoice\"  name=\"test_start_date\">\n" +
            "                                                    </div>\n" +
            "                                                    <div><span>&nbsp;</span></div>\n" +
            "                                                    <div class=\"layui-card-body\">\n" +
            "                                                        <div class=\"form-group\">\n" +
            "                                                            <label class = \"record_label\" >进度</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\"/>\n" +
            "                                                            <label class = \"record_label\" >未解决bug</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\"/>\n" +
            "                                                            <label class = \"record_label\" >已解决bug</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\"/>\n" +
            "                                                            <label class = \"record_label\" >后台 bug</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\"  />\n" +
            "                                                            <label class = \"record_label\" >IOS bug</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\" />\n" +
            "                                                            <label class = \"record_label\" >Android bug</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\"   />\n" +
            "                                                            <label class = \"record_label\" >H5 bug</label>\n" +
            "                                                            <input  class=\"edittestRecord\" type=\"text\"   />\n" +
            "                                                        </div>\n" +
            "                                                        <div class=\"form-group\">\n" +
            "                                                            <label class = \"record_label\" >备注</label>\n" +
            "                                                            <textarea class=\"form-control record_textarea \"></textarea>\n" +
            "                                                        </div>\n" +
            "                                                        <div class=\"form-group\">\n" +
            "                                                            <input id=\"addmergetestRecords\" type=\"text\" style=\"display:None\" name=\"headers\"/>\n" +
            "                                                        </div>\n" +
            "                                                    </div>\n" +
            "                                                </div>\n" +
            "                                            </div>\n" +
            "                                    </div>";
        container_test.parentNode.insertBefore(oDiv, node_test)
        node = oDiv.nextSibling;
    }

    $('#addtestRecord').click(function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //常规用法
            var dateChoiceSize = $('.datechoice').length;
            laydate.render({
                    elem: "#datechoice" + dateChoiceSize,
                    type: 'datetime'
                });
        })
    })

</script>