如何用相同的現有數據創建新的div？

Question

我正在開發一個小型PHP項目。在那裏，我有一個發票模塊。爲此，我需要一個自動生成選項，可以在用戶單擊時自動生成新的div。這是我想要新的div。

<div> 
    <select name='pro_name[]' class="pro_name"> 
    <option value='1'>Pro 1</option> 
    <option value='2'>Pro 2</option> 
    <option value='3'>Pro 3</option> 
    </select> 

    <input type='text' name='price[]' class="price"> 
</div> 

請不要問我用下面的方法做到這一點。

$('#div').append('<div class="cloud"><input type="text" /></div>'); 

我的選擇框是動態的，從上面的例子我無法顯示我的動態選項。

Answer 1

考慮：

<div class='template'> 
    <select name='pro_name[]' class="pro_name"> 
    <option value='1'>Pro 1</option> 
    <option value='2'>Pro 2</option> 
    <option value='3'>Pro 3</option> 
    </select> 

    <input type='text' name='price[]' class="price"> 
</div> 

然後，你可以這樣做：

var clone = $('div.template').clone(); 

您現在可以使用變量克隆

Answer 2

你可以做到這一點很容易使用jQuery的clone方法。

var clonedDiv; 

$(document).ready(function(){ 
    //Important, if you clone by ID you need to 
    //change the ID before you append the content 
    clonedDiv = $('.divToClone').clone(); 
}); 

$('#yourTrigger').click(function(){ 

    //Append the content to the parent div 
    $('.parentDiv').append(clonedDiv); 
}); 

另外，我建議您儘快在jQuery加載時克隆元素以避免複製用戶數據。