使用 jquery 动态创建 div 会导致语法错误答案

【问题标题】：Dymanically creating a div using jquery causes syntax error使用 jquery 动态创建 div 会导致语法错误
【发布时间】：2015-07-24 07:05:30
【问题描述】：

我必须在使用 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>

我已将值 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]);
    }
}

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

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

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

我删除了带有“form-static-control”的 div，并在具有“text-box-height”类的 div 中添加了“viewDiv”类。

【讨论】：