Как динамически добавить поле ввода с помощью jQuery?

Question

Мне нужно добавить n полей ввода в html-форме одним нажатием кнопки.

<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 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(".....");

Answer 2

Просто добавьте следующий jquery при нажатии кнопки (с идентификатором '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