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.

i created a fiddle, that seems to work as posted: http://jsfiddle.net/BLfGd/ — mindandmedia, Feb 27 '12 at 12:09
Are you setting the height/width of the `div` or the `object`? Seems to work for me: http://jsfiddle.net/bKws9/ — Karl Barker, Feb 27 '12 at 12:10
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. — Jim Blackler, Feb 27 '12 at 12:11
I tried setting the height/width of the DIV, but no go. But setting of the object does! Go figure. — Richard Eng, Feb 27 '12 at 12:21
+1 for the "don't concern yourself" I love StackExchange but some people really get off topic ....hmmmm — David, Jan 22 '13 at 23:40
Hi. I know this is a pretty old question, but I was trying to achieve the same and I keep getting a 'No plugin available to display this content'. Could you please point me to which plugin it is referring? I am totally a newbie and this is my first application. Thank you. — Chocolava, Jul 04 '13 at 14:00

score 3 · Answer 1 · answered Feb 27 '12 at 12:18

3

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

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

answered Feb 27 '12 at 12:18

pedromarce

5,651
2
27
27

score 2 · Answer 2 · answered Feb 27 '12 at 12:19

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

Using JavaScript to load HTML into DIV

2 Answers2