Using JavaScript to load HTML into DIV

Question

I'm trying to load some HTML into a DIV using JavaScript, but I can't alter the size of the DIV frame, no matter what I try. All I get is a small little frame in the middle of the browser window. I've tried CSS. I've tried 'width:' and 'height:'. Here's my code:

<div id="main">
</div>
<script type="text/javascript">
 document.getElementById('main').innerHTML =
 '<object type="type/html" data="welcome.html"><\/object>';
</script>

Don't concern yourself about why I want to do this -- it's part of a greater coding experiment.

• Jim Blackler: JSFiddle jsfiddle.net/jwpc9
• mindandmedia: i created a fiddle, that seems to work as posted: jsfiddle.net/BLfGd
• Karl Barker: Are you setting the height/width of the div or the object? Seems to work for me: jsfiddle.net/bKws9
• Jim Blackler: I take it you'd like to see the markup from welcome.html inserted into the stream of your main page. Using an object tag won't do that. You could try to create an iframe directly and then move the parent node of the contained DOM to the main document... might work, depending on same domain policy, I'd have to try to see.
• Richard Eng: I tried setting the height/width of the DIV, but no go. But setting of the object does! Go figure.

Answer 1

Can you use jquery? Then it becomes trivial...

$('#main').load('welcome.html');

Answer 2

It seems to set the width

document.getElementById('main').innerHTML ='<object type="type/html" data="newhtml.html"><\/object>';
document.getElementById('main').style.width = "600px";
document.getElementById('main').style.border = "solid red 1px";

shows that the width is set to 600px