Question

I’m using jquery to build some html and the final code should look like this:

<div id="uploaded">
  <div class="thumbs">
    <img src="http://www.example.com/image.jpg" />
    <div class="delete-pic">delete</div>
  </div>
</div>

so div id “uploaded” is hard coded in the source, the rest(.thumbs, img, .delete-pic) will be inserted using jquery

so i use the following jquery code to do the job:

$('<div class="thumbs"></div>').appendTo('#uploaded');
$('<img />').attr("src", thumb_url).appendTo('.thumbs');
$('<div></div>').attr("class", "delete-pic").appendTo('.thumbs').text("delete");

this works fine, except that there could be an unknown number of div.thumbs as children of div#uploaded. so the above jquery will appendto the same block of tags into all div.thumbs that are currently on screen.

I was thinking if generating a random id for each div.thumbs and then using that id to appendto the images and div.delete-pic

but maybe there is some easier solution?

Answer 1

Why not create the “thumbs” in memory, then add what you need, then append. like so:

var tempthumb = $('<div class="thumbs"></div>');
$('<img />').attr("src", thumb_url).appendTo(tempthumb);
$('<div></div>').attr("class", "delete-pic").appendTo(tempthumb).text("delete");
$('#uploaded').append(tempthumb);