Append элемент, используя селектор JQuery

Question

мне нужно обновить и добавить свой шаблон дел до родительского 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>