Question

Trying to do this on page load within same page:

CSS:

#item1, #item2, #item3 {visibility: hidden;}

HTML (these will not be shown)

<div id="item1">Something1</div> 
<div id="item2">Something2</div>
<div id="item3">Something3</div>

These div’s will be empty normally, but after page loads they will be populated based on what is on the above div’s.

<div id="real-content">
    <div id="duplicate-item1">Something1</div>
    <div id="duplicate-item2">Something2</div>
    <div id="duplicate-item3">Something3</div>
</div>

Any ideas?

UPDATE: I may try .clone() but will also look into the codes you guys posted below. Thanks in advance..

Turns out .clone() is the solution..

$('.hello').clone().appendTo('.goodbye');

How can I take the .above and turn that into more global? Say I have 20 div’s that need cloning?

Answer 1

$('#idContainerWithHiddenDivs div').each(function(){
    var idToCopy = $(this).attr('id');
    vat newID = 'duplicate-'+idToCopy;
    var $newDiv = $(this).clone().attr('id', newID);
    $('#real-content').append($newDiv);
});

I think is a good way to do it.

Quick example : http://jsfiddle.net/TQdrH/6/ corrected fiddler, the last one wasn’t working.

Or maybe you may want to use this one : http://jsfiddle.net/TQdrH/11/ or you may want to try : http://jsfiddle.net/TQdrH/14/ after your last comment.