JQuery-将div添加到父div

我有以下资料：

<div id="parentCalculation">
<div class="btn-group" role="group">
    <button type="button" id="calculate" class="btn btn-default">Add</button>
</div>

Calculate below. Click on "Add to make another calculation

<div id="CalculateDiv">
<div class="calculation form-group well well-lg col-md-4">
  <label for="cost">Enter Amount</label>
  <input type="text" id="amount" class="form-control" placeholder="0.00">
  <label for="type">Type</label>
  <input type="text" id="type" class="form-control" placeholder="e.g. transfers">
  <label for="comments">Comments</label>
  <textarea class="form-control" id="cost-comments" placeholder="Enter comments"></textarea>
</div>

</div>
</div>

问题是它没有添加到父div，我似乎不知道为什么

---

参见示例：

我认为您需要复制元素，然后必须克隆

x

，否则您将只是重新定位元素

$(document).ready(function () {
    $("#calculate").click(function () {
        var x = $('#CalculateDiv').clone(); //id-selector to be used also clone it
        x.removeAttr('id'); //since id of an element must be unique remove the id from clone
        $("#parentCalculation").append(x);
        //or x.appendTo('#parentCalculation');
    });
});

演示：

---

我想您可以复制

计算

div

$(document).ready(function () {
    $("#calculate").click(function () {
        var x = $('#CalculateDiv .calculation').first().clone();
        $("#CalculateDiv").append(x);
    });
});

---

演示：

您的选择器搜索类，而您的html id为：

---

$（'.CalculateDiv'）应该是
$（'#CalculateDiv'）
jquery代码正在尝试查找“类名”为CalculateDiv的元素。但是，在html结构中没有class=“CalculateDiv”的元素。有一个id为“CalculateDiv”的。只需将
$（'.CalculateDiv'）
更改为
$（'#CalculateDiv'）

也像这样附加

$("#parentCalculation").append($(x[0]).html()); 

当您只是附加dom对象时，它不会使任何事情发生。上面的代码选择该div的html内容，然后将其附加到parentCalculation div

这就是最终代码应该是什么样子

$(document).ready(function() {

    $("#calculate").click(function(){
        var x = $('#CalculateDiv');
        $("#parentCalculation").append($(x[0]).html()); 
    });

});

你不是在创建一个新元素，你只是在移动它。使用
.clone（）
如果我理解正确，我认为他对类部分的理解是正确的，但名称是错误的，我认为他想要$（'.calculation'）谢谢，它成功了！唯一的问题是，由于它们是输入框，如何为所有添加的表单组件的每个输入获取值？我尝试了
$（“#CalculateDiv”）。每个（…）
都没有成功？？
$(document).ready(function() {

    $("#calculate").click(function(){
        var x = $('#CalculateDiv');
        $("#parentCalculation").append($(x[0]).html()); 
    });

});