javascript - 使用jquery动态创建div会导致语法错误

提交表单后，我必须使用Bootstrap创建视图应用程序表单。我用两个“div”创建了它。如何在单击按钮时动态创建div？

<i> Section I: Insured Information</h4>
<div class="form-group dynamicDiv">
    <!--Wrap labels and form controls needed for optimum spacing !-->
    <div class="row top-buffer">
        <label class="col-md-5 labelAlignment">
        Name<span class="red">*</span></label>
        <div class="text-box-height col-md-7">
        <!-- Form controls automatically receive some global styling with              Bootstrap: !-->
             <input type="text" class="form-control" id="txtInsuredName"   placeholder="Enter Name"
              required oninvalid="setCustomValidity('Enter UserName')"      oninput="setCustomValidity('')" />
        <!-- To insert plain text next to label within a horizontal form, .form-control-static class is used  !-->
        <div class="col-md-10 form-control-static lblInsuredName">
        </div>
    </div>
</div>
<div class="row top-buffer">
    <label class="col-md-5 labelAlignment">
        Mailing Address Line 1<span class="red">*</span></label>
    <div class="text-box-height col-md-7 ">
        <input type="text" class="form-control" id="txtInsuredAddress1" placeholder="Enter Address"
            required oninvalid="setCustomValidity('Enter Mailing Address1')" oninput="setCustomValidity('')" />
        <div class="col-md-10 form-control-static lblInsuredAddress1">
        </div>
    </div>
    <footer>
        <div class="col-md-12" align="center">
            <div class="row top-buffer"> </div>
            <div class="row top-buffer"> </div>
            <button type="submit" class="btn btn-success" id="btnSubmit">
                Submit</button>
            <button type="submit"  class="btn btn-info"  id="btnView">
                ViewData</button>
            <input runat="server" type="hidden" id="hdnKey" value=""  />
            <div class="row top-buffer"> </div>
        </div>
    </footer>
<i>

我将值以JSON格式存储为.JSON文件，并将值存储到一个隐藏字段中。
但我必须在表单的每个文本框字段中动态创建第二个div。
我的jQuery函数是：

/*****************Function for showing view page using Query String******************/


$("#btnView").click(function() {
    var strUrlView = new String(window.location.href);
    strUrlView = strUrlView + "?key=" + $("#hdnKey").val();
    window.location.href = strUrlView;
});
var strUrl = new String(window.location.href);
if (strUrl.indexOf("key") != -1) {
    /*****************Hiding form-control div's ******************/
    //to decrypt the uniqueID
    var strKey = strUrl.split("key=")[1].replace("#", '');
    //Reading json and get data from json file to create the view
    var strFile = 'Data/JsonData/' + strKey + '.json';
    $.getJSON(strFile, function(data) {
        $.each(data, function(Key, Value) {
            //to convert control to span
            var ctrl = $("#" + Key);
            for (var k in Value) {
                //for replaceing textbox to label
                if (typeof Value[k] !== 'function') {
                    var strlblname = "div." + k.replace("txt", "lbl").replace("ddl", "lbl");
                    $(strlblname).text(Value[k]);
                }
            }
        });
    });
}
});

我试着这样附加：

for (var k in Value) {
    $(".dynamicDiv").append(" <div class="form-group dynamicDiv"></div>")
    //for replaceing textbox to label
    if (typeof Value[k] !== 'function') {
        var strlblname = "div." + k.replace("txt", "lbl").replace("ddl", "lbl");
        $(strlblname).text(Value[k]);
    }
}

但它显示出语法错误。我犯了什么错？

最佳答案

$.each(data, function(Key, Value) {
            //to convert control to span
            var ctrl = $("#" + Key);
            for (var k in Value) {
                $('.viewDiv' + j++).text(Value[k]);
            }
});

我已经删除了带有“表单静态控件”的div，并在div中添加了类“viewDiv”，该类具有类“文本框高度”。