Appending Child Nodes

I couldn't find any great tutrials that explained attributes, creating and appending.

I need to output the following code in HTML with Javascript when you click a button:

<div class="window">
	<div class="windowTop">
		<div class="left"></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
	<div class="container"></div>
</div>

HTML:

That needs to be appended to the already existing HTML:

<div id="content">
<!--Put the outputted HTML here-->
<div></div>
</div>

HTML:

I have no idea what to do, but I tried, and I have this:

function newWindow(){
var outside = document.getElementById("content");

//All the elements
var windowOut = document.createElement('<div>');
	var windowTop = document.createElement('<div>');
		var left = document.createElement('<div>');
		var middle = document.createElement('<div>');
		var right = document.createElement('<div>');
var container = document.createElement('<div>');

//Add attributes to the elements
windowOut.setAttribute('class','window');
windowTop.setAttribute('class','windowTop');
left.setAttribute('class','left');
middle.setAttribute('class','middle');
right.setAttribute('class','right');
container.setAttribute('class','container');

//Append elements to other elements
windowTop.appendChild(left);
windowTop.appendChild(middle);
windowTop.appendChild(right);
windowOut.appendChild(windowTop);
windowOut.appendChild(container);

outside.appendChild(windowOut);

}

Code (markup):

Thanks for your help,

BP

 

document.createElement('<div>');

is wrong it should be

document.createElement('div');

 

Now I feel stupid.

OK, so that works

Is there anyway to add this using a similar method?

<script type="text/javascript">
	var theHandle = document.getElementById("windowTop");
	var theRoot   = theHandle.parentNode;
	Drag.init(theHandle, theRoot);
</script>

Code (markup):

 

Right, I got most of it.

Except it doesn't work in IE (7).

Help would be great, thanks