前端，新增DIV，自增html片段代码实现，append、attr等方法

需求:

form表单提交，创建一个div，由button控制，可以自由增加div中input输入框等内容的输出。

样式

解析:点击增加，新增一个号段框和一个删除按钮，点击删除，可以删除这一行

代码

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">库存录入</div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="component-form-group">
                <!--模板基础信息 面板-->
                    <div class="layui-form-item">
                    <div class="layui-card">
                        <div class="layui-card-header layui-card-header-child">基础信息</div>
                        <div class="layui-card-body">

          				<h1>删除大量无用代码</h1>

                            <div class="layui-form-item">
                                <label class="layui-form-label">开卡状态</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="isOpenCard" lay-skin="switch" value="1" lay-text="ON|OFF">
                                </div>
                            </div>
                            <input type="hidden" name="iccidList" value="">
                            <div style="clear: both"></div>
                        </div>
                    </div>
                </div>
                <!--模板内容 面板-->
                <div class="layui-card">
                    <div class="layui-card-header layui-card-header-child">ICCID</div>
                    <div class="layui-card-body">

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="radio" name="number" lay-filter="levelM" value="1" title="号段导入" checked="">
                                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" id="add_numbers" lay-filter="component-form-demo3">新增</button>
                            </div>
                        </div>
                        <p class="test-btn"></p>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="radio" name="number" value="2" lay-filter="levelM" title="模板导入">
                            </div>
                        </div>

                        <input type="hidden" name="iccid_list" id="iccid_list" value="">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <div class="layui-btn">
                                    <input type="file" name="file" id="upload" value="2" disabled>
                                </div>
                                <a class="layui-btn" href="/static/example_data/导入库存示例表格.xlsx">下载示例表格</a>
                            </div>
                        </div>

                        <div style="clear: both"></div>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form-demo2">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    .layui-card>.layui-card-header-child{
        background-color:#f2f2f2;
        font-weight: bold;
    }
    .layui-form>.layui-card{
        border: 1px solid #ebebeb;
        border-radius: 5px 5px 0 0;
    }
    .input-label-inline{
        padding: 9px 0;
        width: 98px;
    }
    .required-verify-label>span{
        color: #ff0000;
    }
    .field-flex>div{
        padding:0 150px
    }
</style>
<script src="__STATIC__/layuiadmin/layui/layui.js"></script>
<script>
    //删除-新增卡号字段
    function numberInto(obj){
        $(obj).parent().parent().remove();
    }
</script>
<script>
    layui.config({
        base: '__STATIC__/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate','upload'], function () {
        var $ = layui.$,
            admin = layui.admin,
            element = layui.element,
            upload = layui.upload,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form;

        laydate.render({
            elem: '#silence_end_time' //指定元素
        });

        //指定允许上传的文件类型
        upload.render({
            elem: '#upload'
            , url: '{:Url("uploadIccid")}'
            , accept: 'file' //普通文件
            , exts: 'xls|excel|xlsx'
            , done: function (res) {
                if (res != '') {
                    $("#iccid_list").attr("value", res);
                    layer.msg('上传成功');
                }
            }
        });

        form.on("radio(levelM)", function (data) {
            var status = data.value;
            if (this.value == '1') {
                //清除
                $("#upload").after($("#upload").clone().val(""));
                $("#upload").remove();

                //禁选
                $("#upload").attr("disabled","disabled");

                //活性治愈
                $("#add_numbers").attr("disabled",false);
                $('#add_numbers').removeClass("class").attr('class','layui-btn layui-btn-sm layui-btn-normal');//button删除置灰
                $(".del").attr("disabled",false);

            } else if (this.value == '2') {
                //清除
                $(".del").val('');
                $("#oaOrderId").val('');

                //禁选
                $("#add_numbers").attr("disabled","disabled");
                $('#add_numbers').removeClass("layui-btn-normal").attr('class','layui-btn-disabled');//置灰
                $(".del").attr("disabled","disabled");

                //活性治愈
                $("#upload").attr("disabled",false);
            }
        });

        form.on('select(operator)', function(data){
            let option = '<option>请选择</option>';
            $("#packageSeries").empty();
            $('#packageSeries').html(option);
            $("#mainPackage").empty();
            $('#mainPackage').html(option);
            $("#cardPrice").empty();
            $('#cardPrice').html(option);
            $("#cardType").val("全部");
            $("#makeCardCostType").val("全部");
            form.render("select");
        });

        //卡费计费
        form.on('select(makeCardCostType)', function(data){
            let  operator = $("#operatorName").find("option:selected").val();
            //data.value 得到被选中的值
            $.post('{:Url("admin/Repertory/cardPrice")}'
                ,{ 'data': {
                        'id': data.value,
                        'operatorId': operator
                    } }
                ,function(data){
                    let option = '<option>请选择</option>';
                    if (data.data === ''){
                        $('#cardPrice').html(option);
                    }else{
                        $.each(data.data,function (index,value) {
                            option+='<option value="'+value['id']+'">'+value['originalPrice']+'</option>';
                        })
                    }
                    $('#cardPrice').html(option);
                    form.render("select");
                });
        });

        //获取套餐系列二级数据
        form.on('select(cardType)', function(data){
            //重置基础套餐
            let  operatorName = $("#operatorName").find("option:selected").val();
            //data.value 得到被选中的值
            $.post('{:Url("admin/Repertory/PackageSeriesCardType")}'
                ,{ 'data': {
                        'packageType': data.value,
                        'operatorId': operatorName
                    } }
                ,function(data){
                    let option = '<option>请选择</option>';
                    if (data.data === ''){
                        $('#packageSeries').html(option);
                    }else{
                        $.each(data.data,function (index,value) {
                            option+='<option value="'+value['id']+'">'+value['seriesName']+'</option>';
                        })
                    }
                    $('#packageSeries').html(option);
                    form.render("select");
                });
        });

        //获取基础套餐三级数据
        form.on('select(packageSeries)', function(data){
            //data.value 得到被选中的值
            $.post('{:Url("admin/Repertory/MainPackage")}'
                ,{ 'data': {
                        'packageSeriesId': data.value
                    } }
                ,function(data){
                    let option = '<option>请选择</option>';
                    if (data.data === ''){
                        $('#mainPackage').html(option);
                    }else{
                        $.each(data.data,function (index,value) {
                            option+='<option value="'+value['id']+'">'+value['packageName']+'</option>';
                        })
                    }
                    $('#mainPackage').html(option);
                    form.render("select");
                });

        });

        $("#add_numbers").click(function(){
            let htmladd = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label"></label><div class="layui-input-inline"style="width: 240px;"><input type="text"name="start[]"placeholder="开始位"autocomplete="off"class="layui-input del"></div><div class="layui-form-mid">-</div><div class="layui-input-inline"style="width: 240px;"><input type="text"name="end[]"placeholder="结束位"autocomplete="off"class="layui-input del"></div><button class="layui-btn layui-btn-sm layui-btn-danger"lay-submit=" "lay-filter="component-form-demo3"οnclick="numberInto(this)">删除</button></div></div>';
            $(".test-btn").append(htmladd);
            return false;
        });

        form.on('select(billTotalId)', function(data){
            //data.value 得到被选中的值
            $.post('{:Url("getoperatorInfo")}'
                ,{ id: data.value }
                ,function(data){
                    $("#operatorCity").val(data.operatorCity);
                    $("#operatorName").val(data.operatorName);
                    form.render("select");
                });

        });

        /* 监听提交 */
        form.on('submit(component-form-demo2)', function (data) {
            $.ajax({
                'url':'{:Url("admin/Repertory/add")}',
                'data':JSON.stringify(data.field),
                'success':function(data){
                    if (data.code === 1) {
                        parent.layer.alert(data.msg,{
                            title: '成功'
                        });
                    } else {
                        parent.layer.alert(data.msg,{
                            title: '失败'
                        });
                    }
                    location.reload();
                },
                'dataType':'json',//返回的格式
                'type':'post',//发送的格式
            });
            return false;
        });

    });
</script>

最后

append、attr、removeClass等方法需要灵活使用