how to generate a specific html code using 'appendchild' in java script

how to generate a specific html code using 'appendchild' in java script

in advance I apologize for my bad english. I have written a simple mailbox
code which you can drag emails into a trash box and restore them. but when
I restore the selected mail it doesn't regenerate the exact code. and so
the program doesn't work correctly after restoring, because it is not the
previous html code. here is my code :
var paragraphElement1 = document.createElement('div');
paragraphElement1.className = 'col1';
var spanElement1 = document.createElement('span');
var paragraphElement2 = document.createElement('div');
paragraphElement1.className = 'col2';
var spanElement2 = document.createElement('span');
var nameNode = document.createTextNode(name);
var subjectNode = document.createTextNode(subject);
var item = document.createElement('div');
item.className = 'rows';
item.id = uniqueNumber + '_a' ;
item.appendChild(paragraphElement1);
item.appendChild(spanElement1);
item.appendChild(nameNode);
item.appendChild(paragraphElement2);
item.appendChild(spanElement2);
item.appendChild(subjectNode);
mailbox.appendChild(item);
and this is what i want to generate :
<div id="mail_1_a" class="rows">
<div id="" class="col1"><span>nameNode</span></div>
<div id="" class="col2"><span>subjectNode</span></div>
</div>
well I know what this code generates and that is not what I the upper
code. please help.