单击按钮时添加另一个输入字段答案

【问题标题】：Adding another input field when clicking on a button单击按钮时添加另一个输入字段
【发布时间】：2019-10-23 02:52:48
【问题描述】：

我做了一些研究，但找不到任何东西。我有一个输入，人们可以输入一个位置，但我也希望他们能够添加另一个替代位置。我基本上需要一个按钮来打开一个表单。这是表单的代码：

<div class="form-group">
    <label for="exampleInputEmail1">Location: </label>
    <input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City" 
        width: 50%;>
</div>

这里是按钮的代码：

<center>
    <button id="locationAlternate" type="submit" class="btn btn-primary">
        Alternate Location
    </button>
</center>

【问题讨论】：

标题说你想添加另一个输入，你的问题说你想打开一个表单。您需要澄清您的需求并添加更多细节。您不能只为备用位置添加另一个输入吗？还添加您迄今为止尝试过的内容。

标签： html forms button input

【解决方案1】：

这就是你要找的东西吗？

   $('#locationAlternate').on('click',function() {

 $('#location').append('<div class="form-group" id="altloc"><label for="">Alternate Location: </label> <input name = "AltcityForm" class="form-control" placeholder="Enter Alternate Location" width: 50%;></div>');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group" id="location">
        <label for="exampleInputEmail1">Location: </label>
        <input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City" width: 50%;>
</div> 

<button id="locationAlternate" type="submit" class="btn btn-primary">Alternate Location</button>

【讨论】：

我只是得到按钮本身下方的所有字符。我应该摆脱美元符号吗？
有什么办法可以让它重复。这样按钮保持不变，表单可以继续下降？
重复？你能详细说明一下吗
当我单击按钮时，它会添加表单，非常完美。但它也摆脱了按钮。我想知道在创建新表单时按钮是否有可能停留并移动到该表单下方。因此，每当您单击按钮时，它都会添加更多输入字段
检查我上面的答案，然后单击“运行代码 sn-p”。表单移动到下方，按钮保持不动