getElementById and creating divs dynamically?
===

I'm just wondering how i could make this code more efficient. I feel like there is a lot of code here to accomplish a simple task. But i'm not sure how to better it? Is there a way to dynamically create divs? Or is tehre a way to reduce the number of "getElementById" calls i make? Code is as follows:

HTML: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
    <html>
    	<head>
    		<title>P</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<link rel="stylesheet" type="text/css" href="Piano.css" />
    		<script type="text/javascript" src="./SoundOfNotes.js"></script>
    		<script type="text/javascript">
    			window.onload=MakingNoise;
    		</script>
    	</head>
    
    	<body>
    		<div class="myKeys" id="myKeys">
    			<div class = "Middle" id= "Middle">
    			</div>
    			<div class = "D" id= "D">
    			</div>
    			<div class = "E" id= "E">
    			</div>
    			<div class = "F" id= "F">
    			</div>
    			<div class = "G" id= "G">
    			</div>
    			<div class = "A" id= "A">
    			</div>
    			<div class = "B" id= "B">
    			</div>
    			<div class = "C" id= "C">
    			</div>
    			<div class = "CS" id= "CS">
    			</div>
    			<div class = "AS" id= "AS">
    			</div>
    			<div class = "DS" id= "DS">
    			</div>
    			<div class = "GS" id= "GS">
    			</div>
    			<div class = "FS" id= "FS">
    			</div>
    			<div class = "MiddleCS" id= "MiddleCS">
    			</div>
    		</div>
    		<div class="noteDisplayBox" id="noteDisplayBox">
    		</div>
    	</body>
    
    </html>


JS:



    var notes=new Array("Middle C","C#","D","D#","E","F","F#","G", "G#", "A", "A#", "B", "C");
    function MakingNoise() 
    {
    	document.getElementById("Middle").note = notes[0]; 
    	document.getElementById("Middle").onmouseover=displayIt; 
    	
    	document.getElementById("D").note = notes[2]; 
    	document.getElementById("D").onmouseover=displayIt;
    	
    	document.getElementById("E").note = notes[4]; 
    	document.getElementById("E").onmouseover=displayIt;
    	
    	document.getElementById("F").note = notes[5]; 
    	document.getElementById("F").onmouseover=displayIt;
    	
    	document.getElementById("G").note = notes[7];
    	document.getElementById("G").onmouseover=displayIt;
    	
    	document.getElementById("A").note = notes[9];
    	document.getElementById("A").onmouseover=displayIt;
    	
    	document.getElementById("B").note = notes[11];
    	document.getElementById("B").onmouseover=displayIt;
    	
    	etc.... for the rest of the notes on a keyboard..is there a better way to do this?
    }
    
    
    
    
    function displayIt() 
    {
    	var note=this.note;
    	var screen=document.getElementById("box");
    	
    	if (note && screen) 
    	{
    		screen.innerHTML+=note+"  ";
    	}
    } 
