需要知道如何使用javascript或jquery進行克隆？

Question

我只是想知道我有多接近克隆這個div，我真的不知道我在做什麼這個階段很多的幫助是必要的。

還是應該使用jQuery

<div id="question20">20. Details of Children 
    <br>Family Name 
    <input type="text" name="children" class="textbox"> 
    <br>Given Names 
    <input type="text" name="children" class="textbox"> 
    <br>Sex 
    <input type="text" name="children" class="textbox"> 
    <br>Date of Birth 
    <input type="text" name="children" class="textbox"> 
    <br>Country of Birth 
    <input type="text" name="children" class="textbox"> 
    <br> 
    <script> 
     function cloning() { 
      var container = document.getElementById("mydiv"); 
      var clone = document.getElementById("question20_0").cloneNode(true); 
      clone.setAttribute('id', 'div_' + document.getElementById("mydiv").getElementsByTagName("question20").length); 
      container.appendChild(clone); 
    </script> 
</div> 
<input type="button" value="Press This" onclick="cloning()"> 

Answer 1

我已經更新了你的代碼做什麼，我認爲你想要做的，你可以在這裏找到它展示你在做什麼錯誤的評論：http://jsfiddle.net/v876k/1/

這裏的功能代碼剝離出來的評論：

<script> 
function cloning() { 
    var container = document.getElementById("mydiv"); 
    var clone = document.getElementById("question20").cloneNode(true); 
    clone.setAttribute('id', 'div_' + container.childNodes.length); 
    container.appendChild(clone); 
} 
</script> 

<div id="question20">20. Details of Children 
    <br>Family Name 
    <input type="text" name="children" class="textbox"> 
    <br>Given Names 
    <input type="text" name="children" class="textbox"> 
    <br>Sex 
    <input type="text" name="children" class="textbox"> 
    <br>Date of Birth 
    <input type="text" name="children" class="textbox"> 
    <br>Country of Birth 
    <input type="text" name="children" class="textbox"> 
    <br> 
</div> 

<input type="button" value="Press This" onclick="cloning()"> 

<div id="mydiv"> 
</div> 

Answer 2

使用clone() jQuery中。

HTML：

<input type="button" value="Press This" class="clone"> 

腳本：

$(".clone").click(function(){ 
    $("#question20").clone().insertAfter("div.mydiv:last"); 
}); 

閱讀http://api.jquery.com/clone/瞭解更多詳情。

乾杯 羅伊

Answer 3

經過下面的代碼。

<div id="mydiv"> 
    <div id="question20"> 
     20. Details of Children<br> 
     Family Name<input type="text" name="children" class="textbox"><br> 
     Given Names<input type="text" name="children" class="textbox"><br> 
     Sex<input type="text" name="children" class="textbox"><br> 
     Date of Birth<input type="text" name="children" class="textbox"><br> 
     Country of Birth<input type="text" name="children" class="textbox"><br> 

    </div> 
</div> 
<input type="button" value="Press This" onclick="cloning()"> 
<script> 
function cloning() { 
    var container = document.getElementById("mydiv"); 
    var clone = document.getElementById("question20").cloneNode(true); 
    clone.setAttribute('id','div_'+document.getElementById("mydiv").getElementsByTagName("div").length); 
    container.appendChild (clone); 
} 
</script> 

這些都是錯誤，

• 你錯過}的功能
• 你提到question20_0，而不是question20

Answer 4

你應該在jQuery中使用.cloneNode（）函數。

http://api.jquery.com/clone/