How to use innerHTML

10-15-2006

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?

10-15-2006

On Oct 15, 1:00 am, "Bryan" <BTRichard...@gmail.com> wrote:
> 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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Re: How include a large array?	Edward A. Falk	C Programming	1	04-04-2013 08:07 PM
xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM	sonic	Javascript	5	07-11-2006 08:17 AM
can't get the text from a div, neither when I try to use innerHTML or when I try to walk the DOM	Jake Barnes	Javascript	2	04-07-2006 02:42 AM
if I wanted to never use innerHTML, what else would I use?	Jake Barnes	Javascript	50	02-13-2006 07:34 PM
NEED to use a string to create a table, and innerHTML does not work.	wk	Javascript	6	04-21-2005 04:00 AM