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

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

追加每个克隆元素自身的股利。然后将所有div添加到行中。

Due to a bug，你必须在克隆的选择框强制值

$(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 2

您只需将克隆的对象。

$(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 3

我不完全了解你需要什么，但克隆返回一个对象，这就是为什么追加到一个字符串，将返回到[对象的对象。也许你可以使用outerHTML。

$(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>