Javascript 使用jQuery clone（）添加输入行 背景：

我从发票项目详细信息中得到了一组输入元素。我希望用户能够为每个附加项添加输入字段行

输入标记 问题: 当我第一次单击

add

按钮时，它工作正常，在第一个输入字段之后添加一行输入字段，但是如果我再次单击它，它将添加2行，然后再次单击它，它将添加4行。我意识到这可能是因为克隆的

.input行

div包含在克隆中，但我尝试使用

：first

选择器仅复制第一个div元素。有没有办法解决这个问题

问题 如何确保标记只附加了一个

div

。

解决方案 jQuery

appendTo

方法将元素添加到现有的div中，这意味着第二次克隆时，div包含两行输入字段，第三次克隆时将包含4行输入字段

要克服此问题，请使用

insertAfter（）

方法

按钮Javascript 解决方案 jQuery

appendTo

方法将元素添加到现有的div中，这意味着第二次克隆时，div包含两行输入字段，第三次克隆时将包含4行输入字段

要克服此问题，请使用

insertAfter（）

方法

按钮Javascript

---

到目前为止，我看到的最佳解决方案是以下jQuery库：

---

到目前为止，我看到的最佳解决方案是以下jQuery库：

---

你是否为自己的答案发布了问题：p:）@TrueBlueAussie我同意这一点，但这不符合常见问题解答的风格吗？@TrueBlueAussie不，我的意思是堆栈溢出实际上支持这类事情，即提问者已经知道答案并立即发布。除非最近有所改变。@TrueBlueAussie这实际上是你的“特别”。我在打字时发现appendTo是一个错误的方法。在发布问题时，这样可以让您同时发布答案。把整件事都打出来后，我想分享答案也会很有用。你是否自己发布了问题的答案：P:）@TrueBlueAussie我同意这一点，但这不符合常见问题解答的风格吗？@TrueBlueAussie不，我的意思是堆栈溢出实际上支持这类问题，也就是说，提问者已经知道答案，并立即发布。除非最近有所改变。@TrueBlueAussie这实际上是你的“特别”。我在打字时发现appendTo是一个错误的方法。在发布问题时，这样可以让您同时发布答案。把整件事都打出来后，我想分享答案也会很有用。

<div class="input-row">
    <div class="form-group">
        <label for="item_name">Item:</label>
        <div>
            <input type="text" name="item_name[]" placeholder="Name">
        </div>
        <div>
            <input type="text" name="item_qty[]" placeholder="Quantity">
        </div>
        <div>
            <input type="text" name="item_price[]" placeholder="Price">
        </div>
        <div>
            <input type="text" name="item_total[]" placeholder="Total">
        </div>
    </div>
</div>

<div class="col-lg-2">
    <a id="add-item" href="#">Add Item</a>
</div>

$('#add-item').click(function(){
    $('.input-row:first').clone().appendTo('.input-row:last');
})

$('#add-item').click(function(){
    $('.input-row:first').clone().insertAfter('.input-row:last');
})