while I would disagree with your assessment of the nature of your request (people who come here for help tend to at least post some code that they have tried and then go on to describe specific difficulties that they are having. People who expect things handed to them on a platter come with ridiculous timelines and zero effort shown), I'd say that if this was just a minor question the teacher was probably thinking of inner or outerHTML.
It doesn't look anything like the picture posted, but can be used to get a graphical representation of the page structure at load time. If you want a representation of the page as is you would have to recurse the nodes, an operation that would be worth way more than a few points, I suspect (unless this is an advanced programming class). Anyway. outerHTML grabs the tags of the "root" div as well. innerHTML only grabs what's "inside" it...
(works in all browsers, looks best in Chrome)
<textarea id="tarea" style="width: 400px; height: 100px">some text</textarea><br />
<input type="button" value ="show me" onclick ="showIt()"/>
var d = document.getElementById("disp");
var text = ("innerText" in d)? "innerText" : "textContent";
d[text] = document.getElementById("myDiv").outerHTML;