clone, update and prepend div

Question

I have a page where users can post questions. Whenever a new question is posted I am cloning the div , updating it with new values and then prepending the div on top of of all the previous divs.This is my code:

var lastDiv = $("#divAll div:last").clone();     
$("[id$='_imgPostAll']",lastDiv).attr("ImageUrl",post.d.sImageURL);
$("[id$='_lblNameAll']",lastDiv).html(post.d.sNickName); 
$("[id$='_lblTimeAll']",lastDiv).html(post.d.sDate);
$("[id$='_lblShareAll']",lastDiv).html(post.d.sShareComment);   
$("#divAll").prepend(lastDiv);
$("#divAll div:last").show("slow");`

The updated div is not showing up on the page. But when I replace var lastDiv = $("#divAll div:last").clone() with var lastDiv = $("#divAll").clone(), the updated div appears but it appears twice, thrice depending on the previous divs. I only want it to clone the last div and update it with new values rather than all the previous divs.

Your help will be really appreciated.

Answer 1

It looks like when you clone the div, the name attribute is copied with the clone. So when you later retrieve the div for recloning, you inadvertently grab the copies you've already made as well as the original.

Answer 2

Your last line reads:

$("#divAll div:last").show("slow");`

But you are prepending your cloned div to the container, so the cloned div will appear first.

Show the first div instead:

$("#divAll div:first").show("slow");`

or even better, simply show the cloned div directly:

lastDiv.show("slow");