单击时，将元素克隆到变量并将其附加到另一个元素

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>