How do I inject html elements using jquery based on a given number?

Question

I am using jquery to get a count of children elements within a parent div.

$('#slideshow > div').size()

Then using append(), I'd like to inject the number of div elements that are in #slideshow into another div called .mainImageBrowserTabButtonWrapper

Any help on this would be appreciated.

EDIT

I realize my initial question didn't describe what I wanted very well.

Lets say I have the number of elements in #slideshow is 3. I would then like to inject 3 other divs into .mainImageBrowserTabButtonWrapper

Answer 1

$('.mainImageBrowserTabButtonWrapper').text(  $('#slideshow > div').size() )

Answer 2

You can store the count separately and append it on the next call:

var count = $("#slideshow > div").size();
$(".mainImageBrowserTabButtonWrapper").text( "Count: " + count );

Note: This only shows the count, it doesn't clone the divs.

Answer 3

You could clone the elements.

$("#slideshow > div").clone().appendTo(".mainImageBrowserTabButtonWrapper");

Or, if you'd prefer brand new, empty elements you could use a loop.

for (var i = 0; i < $("#slideshow > div").length; i++)
    $(".mainImageBrowserTabButtonWrapper").append("<div />");