innerHTML query

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mr_burns
    #1

    innerHTML query

    Hi,

    I am trying to write code that will insert HTML into an empty <span>
    tag. The function that will do this is add_item(), which works OK
    where the code is inserted using the innerHTML command/method. The
    problem occurs when i want to overwrite the code using a similar
    function. it doesnt seem to do anything let alone overwrite. below is
    a stripped down version of what i am tryin to achieve:



    <html>
    <head>
    <script>

    function add_item() {

    item1.innerHTML = '<p>Insertion</p>';

    }

    function delete_item() {

    item1.innerHTML = '<p>Insertion now overwritten</p>';

    }

    </script>
    </head>
    <body>
    <span onClick="add_it em()">Click here to insert</span><br><br>
    <span onClick="delete _item()">Click here to delete</span><br><br>
    <span id="item1"></span>
    </body>
    </html>


    if anybody could tell me why it doesnt overwrite or another approach i
    should try it would be much appreciated. thanks

    burnsy
    Tags: None
    • Dag Sunde
      #2
      Re: innerHTML query

      "mr_burns" <bissatch@yahoo .co.uk> wrote in message
      news:651c6ea9.0 404021202.3c211 8ee@posting.goo gle.com...[color=blue]
      > Hi,
      >
      > I am trying to write code that will insert HTML into an empty <span>
      > tag. The function that will do this is add_item(), which works OK
      > where the code is inserted using the innerHTML command/method. The
      > problem occurs when i want to overwrite the code using a similar
      > function. it doesnt seem to do anything let alone overwrite. below is
      > a stripped down version of what i am tryin to achieve:
      >
      >
      >
      > <html>
      > <head>
      > <script>
      >
      > function add_item() {
      >
      > item1.innerHTML = '<p>Insertion</p>';
      >
      > }
      >
      > function delete_item() {
      >
      > item1.innerHTML = '<p>Insertion now overwritten</p>';
      >
      > }
      >
      > </script>
      > </head>
      > <body>
      > <span onClick="add_it em()">Click here to insert</span><br><br>
      > <span onClick="delete _item()">Click here to delete</span><br><br>
      > <span id="item1"></span>
      > </body>
      > </html>
      >
      >
      > if anybody could tell me why it doesnt overwrite or another approach i
      > should try it would be much appreciated. thanks
      >[/color]
      The code you posted works like a charm in IE6, but doesn't work at all
      in ie. Mozilla 1.6...

      Replace your references to item1 with this:

      function add_item() {
      document.getEle mentById("item1 ").innerHTM L = '...';
      }

      function delete_item() {
      document.getEle mentById("item1 ").innerHTM L = '...';
      }

      --
      Dag.


        Comment

        • Frostillicus
          #3
          Re: innerHTML query

          Your code works perfectly in IE6 but not in Mozilla (I'm using 1.6). Here
          are the modifications I made to get it to work in Mozilla, as well as IE:

          function add_item() {
          var myitem1;
          myitem1 = document.getEle mentById("item1 ");
          myitem1.innerHT ML = '<p>Insertion</p>';
          }

          function delete_item() {
          var myitem1;
          myitem1 = document.getEle mentById("item1 ");
          myitem1.innerHT ML = '<p>Insertion now overwritten</p>';
          }

          using document.getEle mentById() will work in any DOM (Document Object Model)
          compliant browser (at least, I'm pretty sure it will). Try to avoid
          IE-specific code (I've been known to do this where necessary, but as a
          general rule, stick to the DOM whereever possible).


            Comment

            Previous template Next
            Working...