單擊時，將元素克隆到變量並將其附加到另一個元素

Question

我有一個表單，我想對其進行設置，以便當用戶在輸入中輸入/選擇值並單擊“添加”按鈕時，它將克隆每個輸入/選擇框，將它們分配給變量，然后將它們附加到下面的另一個元素。 我目前所擁有的只是返回[object Object]而不是克隆元素。 我要去哪里錯了？

 $(function() { $('button').click(function() { var $name = $('#name').clone(), $email = $('#email').clone(), $package = $('#package').clone(), $newRow = '<div class="name">' + $name + '</div><div class="email">' + $email + '</div><div class="package">' + $package + '</div>'; $('.row').append($newRow); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div> 

Answer 1

您只需要追加克隆的對象。

 $(function() { $('button').click(function() { var $name = $('#name').clone(), $email = $('#email').clone(), $package = $('#package').clone(); $('.row').append($name); $('.row').append($email); $('.row').append($package); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div> 

Answer 2

將每個克隆的元素附加到其自己的div。 然后將所有div附加到該行中。

由於存在錯誤 ，您必須在克隆的選擇框中強制輸入值

 $(function() { $('button').click(function() { var $name = $('<div class="name"></div>').append($('#name').clone()), $email = $('<div class="email"></div>').append($('#email').clone()), $package = $('<div class="package"></div>').append($('#package').clone()); $package.find('#package').val($('#package').val()); $('.row').append($name, $email, $package); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div> 

---

最后一件事。 您不應該通過id=識別元素，因為這些元素在整個頁面中都是唯一的。 嘗試重寫代碼，以便可以將類用於選擇器。 例如：

<input class="i_name" />
...
$('.i_name').clone()

Answer 3

我不完全了解您需要什么，但是克隆返回一個對象，這就是為什么將附加到字符串的對象返回到[object Object]。 也許您可以使用externalHTML。

 $(function() { $('button').click(function() { var $name = $('#name').clone(); $email = $('#email').clone(); $package = $('#package').clone(); $newRow = '<div class="name">' + $name[0].outerHTML + '</div><div class="email">' + $email[0].outerHTML + '</div><div class="package">' + $package[0].outerHTML + '</div>'; $('.row').append($newRow); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div>