JS生成子节点并且附加ID，name，然后提交表单；

在做项目的时候，涉及到一个功能就是录入书本。书本数量用户自定义，书本编码自动生成；这样就会涉及到添加DOM节点的技术了；

前台页面：

                <form action="/Book/addOldSuccess?GUID=@book.BookGUID" οnsubmit="return  checkOBKAll()" class="form-horizontal" method="post">
                    <legend>添加已有书本</legend>
                    <div class="control-group">
                        <label for="BookCode" class="control-label">添加数量</label>
                        <div class="controls">
                            <input type="text" name="store" id="store" class='input-square' οnkeyup="showBookCode()" οnblur="CheckStore(this.value)">&nbsp;&nbsp;
                            前缀<input type=" text" name="BKPre" id="BKPre" class='input-square' οnkeyup="EditBookCode()" οnblur="CheckPre(this.value)" style="width:100px;">&nbsp;&nbsp;
                            后缀起始数<input type=" text" name="BKEnd" id="BKEnd" class='input-square' οnkeyup="EditBookCode()" οnblur="CheckEnd(this.value)" style="width:40px;">&nbsp;&nbsp;*
                            <span id="errorBK" style="display: none; color: red;">数量，编码前缀和后缀不能为空</span>
                            <span id="errorNUM" style="display: none; color: red;">数量和后缀必须是数字</span>
                        </div>
                    </div>
                    <div id="bookCodeAll">
                        <div class="bookall">
                            <div class="control-group" id="Book1">
                                <label for="BookCode" class="control-label">编码1</label>
                                <div class="controls">
                                    <input type="text" name="BookCode1" id="BookCode1" class='input-square' οnblur="checkBookCode(this.value)">&nbsp;&nbsp;*
                                    <span id="errorbc0" style="display:none;color:red;">该已存在，请重新输入！</span>
                                    <span id="errorbc1" style="display: none; color: red;">只能输入6-20个字母、数字、下划线</span>
                                </div>
                            </div>
                        </div>
                    </div>   
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="form-actions">
                                <input class="btn btn-primary" type="submit" name="submit"></input>
                                <input type="reset" class='btn btn-danger' value="重置">
                            </div>
                        </div>
                    </div>
                </form>

后台JS：

//}
function showBookCode() {
    var size = 1;
    var i = parseInt($("#store").val());
    $("#bookCodeAll").empty();
    for (size; size <= i; size++) {
        $("#bookCodeAll").append(" <div class='bookall'><div class='control-group' ><label for='BookCode' id='BK' class='control-label'></label><div class='controls'><input type='text'  id='BookCode' class='input-square' οnblur='checkBookCode1(this.value)'>&nbsp;&nbsp;*<span id='errorbc0' style='display:none;color:red;'>编码1已存在，请重新输入！</span><span id='errorbc1' style='display: none; color: red;'>只能输入6-20个字母、数字、下划线</span></div></div></div>");
        $("#BookCode").attr({ "name": "BookCode" + size, "id": "BookCode" + size });
        $("#BK").attr({ "name": "BK" + size, "id": "BK" + size });
        $("#BK" + size).text("编码" + size);
    }
    EditBookCode()


}
function EditBookCode() {
    var prefix = $("#BKPre").val();    
    var begin = $("#BKEnd").val();
    if (begin == "") {
        begin = 1;
    }
    var size = 1;
    var i = parseInt($("#store").val());
    for (size; size <= i; size++) {
        $("#BookCode" + size).val(prefix + "_" + begin);
        begin =  parseInt(begin) + 1;
    }
}