Question

我需要在单击按钮时以html形式附加n个输入框字段。

<div id='TextBoxesGroup'>
   <div class="col-sm-11 col-xs-11 classTextbox" id="TextBoxDiv1">
     <input type="text" id='AB1' name="name[]" placeholder="" >
   </div>
</div>

<div class="col-sm-1 col-xs-1">
    <a id="addFieldBtn"><i class="fa fa-plus-circle" aria-hidden="true"></i> 
     </a>
</div>

这是我上面的代码的屏幕截图：

https://i.stack.imgur.com/AR2Es.png

Answer 1

只需在按钮单击时添加以下jquery（ID为'addFieldBtn'）：

        $("#addFieldBtn").click(function () {
               jQuery('#TextBoxesGroup .classTextbox').addClass('marginBottom10');
               var counter = 2;
               var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter).attr("class", 'marginBottom10 col-sm-11 col-xs-11');

               newTextBoxDiv.after().html('<input type="text" name="name[]' + counter +
               '" id="AB' + counter + '" Placeholder="" >');

               newTextBoxDiv.appendTo("#TextBoxesGroup");
               counter++;
           });

此CSS用于在每个输入字段后添加空间：

<style>
.marginBottom10{
    margin-bottom:10px;
}
</style>

现在是我的输出： https://i.stack.imgur.com/E34mf.png

Answer 2

您可以使用jquery append()。来显示html内容。

请尝试以下示例代码

var counter=2;
$('#addFieldBtn').click(function(){
$('#TextBoxesGroup').append('<div class="col-md-11 classTextbox" id="TextBoxDiv1" style="  margin-bottom:10px;"> <input type="text" id="AB'+counter+'" name="name[]" placeholder="" > </div>');
counter++
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id='TextBoxesGroup' class="row">
   <div class="col-md-11 classTextbox" id="TextBoxDiv1">
     <input type="text" id='AB1' name="name[]" placeholder="" >
   </div>

<div class="col-md-1">
    <a id="addFieldBtn"><i class="fa fa-plus-circle" aria-hidden="true"></i> 
     </a>
</div>
</div>

更新

如果要在第一个孩子之前添加文本框。

$('#TextBoxesGroup').prepend(".....");

如果您想在第一个孩子之后添加文本框。

$('#TextBoxesGroup').append(".....");

如何使用jQuery动态添加输入框？

2 个答案: