How to use innerHTML

B

Bryan

Hello all,

I have a few questions about the following code:

function load() {
document.getElementById('sidebar').innerHTML = "<a
href='javascript:test()'>Hello</a>";
}
function test() {
document.getElementById('main').innerHTML = "World";
}
<body onload='load()'>
<div id='main' />
<div id='sidebar' />
</body>

When I go to the page, it displays the "Hello" link right away (as it
should). However, when I click on the link, "Hello" goes away and
"World" appears. Why is this? I expected "Hello" to stay on the page
and "World" to appear on the page since they are in different div's.
Why does inserting HTML into one div remove the HTML from other divs?

One more question... before, I had <div id='main' /> after <div
id='sidebar' /> in the <body>. However, when I had it this way I would
get an error saying "document.getElementById('main') has no
properties". Why does this happen when main is after sidebar, but not
when it's before?
 
O

One Dumm Hikk

Hello all,

I have a few questions about the following code:

function load() {
document.getElementById('sidebar').innerHTML = "<a
href='javascript:test()'>Hello</a>";}function test() {
document.getElementById('main').innerHTML = "World";}<body onload='load()'>
<div id='main' />
<div id='sidebar' />
</body>

When I go to the page, it displays the "Hello" link right away (as it
should). However, when I click on the link, "Hello" goes away and
"World" appears. Why is this? I expected "Hello" to stay on the page
and "World" to appear on the page since they are in different div's.
Why does inserting HTML into one div remove the HTML from other divs?

Because you are using xHTML syntax in IE and relying on error
correction which IE "error corrects" the above HTML to this:

<div id="main"></div>

Change your HTML to this:

<div id='main'></div>
<div id='sidebar'></div>

And ti will work the way you wanted it too. Also, read the group FAQ
with regards to javascript: in the HREF of a link.
One more question... before, I had <div id='main' /> after <div
id='sidebar' /> in the <body>. However, when I had it this way I would
get an error saying "document.getElementById('main') has no
properties". Why does this happen when main is after sidebar, but not
when it's before?

See above.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top