Modify elements position and rotation before appending
<p>I'm a hopeless javascript newbie and I'm trying to insert dynamically created image elements into DOM while positioning and rotating them randomly.</p>

<p>At the moment I'm basically doing this:</p>

<ol>
<li>Create an array with all the image file paths</li>
<li>Create a div with dynamically created name and insert into DOM</li>
<li>Generate 20 different instances of the images and insert into DOM to the corresponding div</li>
<li>Rotate each image by a random amount and position each image randomly. For rotation I use the jQuery rotate plugin.</li>
</ol>

<p>I have a feeling I'm doing all this in a very stupid way since I'm first inserting the elements into DOM and THEN manipulating their position and rotation.</p>

<p>Is there a way to first do everything in virtual memory and finally insert the elements to DOM when all the manipulations have already been done?</p>

<p>Here is my current code (sorry for the noobish quality):</p>

<pre><code>$(document).ready(function(){

var wrapper = $('#wrapper'),


function movieCreator(movieName, generateAmount){

var contents=new Array (

'&lt;img class="film '+movieName+'" src="images/'+movieName+'01.png" alt="'+movieName+'" /&gt;',

'&lt;img class="film '+movieName+'" src="images/'+movieName+'02.png" alt="'+movieName+'" /&gt;',

'&lt;img class="film '+movieName+'" src="images/'+movieName+'03.png" alt="'+movieName+'" /&gt;',

'&lt;img class="film '+movieName+'" src="images/'+movieName+'04.png" alt="'+movieName+'" /&gt;',

'&lt;img class="film '+movieName+'" src="images/'+movieName+'05.png" alt="'+movieName+'" /&gt;',

'&lt;img class="film '+movieName+'" src="images/'+movieName+'06.png" alt="'+movieName+'" /&gt;',

'&lt;img class="film '+movieName+'" src="images/'+movieName+'07.png" alt="'+movieName+'" /&gt;'   

);

var tmp='';
var dynamicIdName = 'box'+movieName;
var dynamicIdCall = '#box'+movieName;
wrapper.append("&lt;div id='"+dynamicIdName+"' class='moviebox'&gt;&lt;/div&gt;");


var random
for (i=0; i &lt; generateAmount;){
random = Math.floor(Math.random()*contents.length);
tmp += contents[random];
i++
};

$(dynamicIdCall).append(tmp);

$(".film").each(function(){ 
    randomrot = Math.floor(Math.random()*360); 
    randomposX = Math.floor(Math.random()*200); 
    randomposY = Math.floor(Math.random()*200); 
    $(this).rotate(randomrot);
    $(this).css({'top': randomposY -40});
    $(this).css({'left': randomposX -40});

});


    wrapper.on('click','.film',function(){
    imageControl(this);
    });



} //end movieCreator

    movieCreator('terminator', 20);
    movieCreator('rambo', 20);
    movieCreator('godfather', 20);
    movieCreator('matrix', 20);
    movieCreator('kingkong', 20);


}); //dom ready
</code></pre>
