How to use innerHTML

Discussion in 'Javascript' started by Bryan, Oct 15, 2006.

  1. Bryan

    Bryan Guest

    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?
    Bryan, Oct 15, 2006
    #1
    1. Advertising

  2. On Oct 15, 1:00 am, "Bryan" <> 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
    One Dumm Hikk, Oct 15, 2006
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. wk
    Replies:
    6
    Views:
    113
  2. Jake Barnes
    Replies:
    50
    Views:
    376
    Matej
    Feb 13, 2006
  3. Jake Barnes
    Replies:
    2
    Views:
    115
    Jake Barnes
    Apr 7, 2006
  4. sonic
    Replies:
    5
    Views:
    266
    Randy Webb
    Jul 11, 2006
  5. SkyZhao
    Replies:
    0
    Views:
    72
    SkyZhao
    Apr 27, 2007
Loading...

Share This Page