附加元素使用jQuery選擇

Question

我需要重新和我的模板DIV追加到按鈕單擊父DIV，這是可以做到多次

<div id = "parent"> 
    <div id = "child_1"> 
     <div><input type = "text"></div> 
     <div><input type = "text"></div> 
     //several inputs and divs 
    </div> 
</div> 

和我的腳本

//on button click event 
var template = $("#parent").children().last(); 
template.attr("id","child_2"); //just a sample of dynamic id 
$("#parent").append(template); 

但這不工作

Answer 1

你需要clone()你追加前孩子的副本，否則你只是把當前元素放回原來的位置。

var template = $("#parent").children().last().clone(); 

Working example

Answer 2

試試這個：

var html = $("#parent").html(); 
 
var i = 1; 
 

 
$("button").on("click",function(){ 
 
    i++; 
 
    $("#parent").append(html.replace('id="child_1"','id="child_' + i + '"')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id = "parent"> 
 
    <div id = "child_1"> 
 
     <div><input type = "text"></div> 
 
     <div><input type = "text"></div> 
 
     //several inputs and divs 
 
    </div> 
 
</div> 
 
<button>Click</button>