javascript - 使用js动态添加div到html

Question

我正在尝试使用按钮单击添加 html divs(带文本字段)。我的表单如下所示: 在 add size 按钮上单击它添加一行(Price 和 size )和 one add More item 按钮单击 i想要添加带有名称、价格 和大小 等的新区域。HTML 代码是:

<div class="clearfix"></div>
                    <div class="moreitems form-group" style="border:1px solid #ccc;height:200px;display:none;">

                     </div>

我的js代码是:

jQuery("#addmoreitems").click(function () {
    var options = jQuery("#select1").html();

jQuery('.moreitems').css("display","block");
    var fld = '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Product Name :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="pname[]" id="pname"></div></div></div>';
   fld += '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Price :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="more_prices[]" id="prices"><select name="more_size[]" class="mysize">'+options+'</select></div></div>';
   fld += '<div class="col-sm-4"><div class="col-sm-3" style="margin-top:15px;"><button type="button" id="addsize" class="btn btn-info">Add Size</button></div></div>';
jQuery('.moreitems').html(fld);
jQuery('.mysize').html(options);


    });
});

但是这段代码是第一次添加。我想添加多次添加更多元素按钮。同时在添加更多尺寸按钮上想要添加价格和尺寸字段。

Answer 1

问题是你正在使用 html() 函数来替换整个 html 内容，在你的情况下你每次都想 append() HTML你点击按钮。

改变:

 jQuery('.moreitems').html(fld);

收件人:

 jQuery('.moreitems').append(fld);