Append element using jquery selector

Question

I need to recreate and append my template div to the parent div on button click and this can be done multiple times

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

and my script

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

But this doesn't work

Rory McCrossan · Accepted Answer · 2016-07-07 09:23:52Z

2

You need to clone() a copy of the child before you append it, otherwise you just put the current element back in its original position.

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

Working example

answered Jul 7, 2016 at 9:23

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roxoradev · Accepted Answer · 2016-07-07 09:26:56Z

0

Try with this:

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>

answered Jul 7, 2016 at 9:26

Roxoradev

9034 silver badges13 bronze badges

Collectives™ on Stack Overflow

Append element using jquery selector

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related