By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,575 Members | 1,413 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,575 IT Pros & Developers. It's quick & easy.

How to use innerHTML

P: n/a
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?

Oct 15 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On Oct 15, 1:00 am, "Bryan" <BTRichard...@gmail.comwrote:
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.

--
Randy

Oct 15 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.