document.body.innderHTML

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • christopher.secord@gmail.com

    document.body.innderHTML

    Can someone please tell me why this works:

    document.body.i nnerHTML =
    "<table><tr><th >one</th></tr><tr><td>two</td></tr></table>";

    But this does not work:
    document.body.i nnerHTML = "<table><tr >";
    document.body.i nnerHTML = document.body.i nnerHTML +
    "<th>one</th></tr><tr><td>two</td></tr></table>";

    Thanks

  • Evertjan.

    #2
    Re: document.body.i nnderHTML

    wrote on 20 sep 2005 in comp.lang.javas cript:
    [color=blue]
    > Can someone please tell me why this works:
    >
    > document.body.i nnerHTML =
    > "<table><tr><th >one</th></tr><tr><td>two</td></tr></table>";
    >
    > But this does not work:
    > document.body.i nnerHTML = "<table><tr >";
    > document.body.i nnerHTML = document.body.i nnerHTML +
    > "<th>one</th></tr><tr><td>two</td></tr></table>";
    >[/color]

    Perhaps because you have the script inside the body,
    and that script is lost in execution of
    the first line of your second example.


    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)

    Comment

    • Zoe Brown

      #3
      Re: document.body.i nnderHTML


      <christopher.se cord@gmail.com> wrote in message
      news:1127250204 .049817.92770@o 13g2000cwo.goog legroups.com...[color=blue]
      > Can someone please tell me why this works:
      >
      > document.body.i nnerHTML =
      > "<table><tr><th >one</th></tr><tr><td>two</td></tr></table>";
      >
      > But this does not work:
      > document.body.i nnerHTML = "<table><tr >";
      > document.body.i nnerHTML = document.body.i nnerHTML +
      > "<th>one</th></tr><tr><td>two</td></tr></table>";[/color]

      you would need "document,body. .." is javascript and you are just creating a
      table and adding text to it the document,body stuff will not be processed.


      Comment

      • christopher.secord@gmail.com

        #4
        Re: document.body.i nnderHTML

        Evertjan. wrote:[color=blue]
        > Perhaps because you have the script inside the body,
        > and that script is lost in execution of
        > the first line of your second example.[/color]

        Thanks for trying to help, but no, I'm not quite that stupid.

        I'm not sure if I can cut and paste html through google groups. I'm
        not sure if this is going to show up or not.

        <html>
        <head>
        <script language="JavaS cript">

        function duh() {
        // this will work:
        document.body.i nnerHTML =
        "<table><tr><th >one</th></tr><tr><td>two</td></tr></table>";

        // this will not work (uncomment it to see for yourself
        /*
        document.body.i nnerHTML = "<table><tr >";
        document.body.i nnerHTML = document.body.i nnerHTML +
        "<th>one</th></tr><tr><td>two</td></tr></table>";
        */
        }
        </script>
        </head>
        <body onload="duh()">
        </body>
        </html>

        Comment

        • christopher.secord@gmail.com

          #5
          Re: document.body.i nnderHTML


          Zoe Brown wrote:[color=blue]
          > you would need "document,body. .." is javascript and you are just creating a
          > table and adding text to it the document,body stuff will not be processed.[/color]

          I'm sorry, but I really can't parse that sentence. Can you explain a
          little more please?

          Comment

          • christopher.secord@gmail.com

            #6
            Re: document.body.i nnderHTML

            To partially answer my own question. The answer seems to have
            something to do with error correcting code in the browser. If you set
            body.innerHTML equal to something that has a table start tag but no
            table end tag, the browser (I'm using IE, Firefox, and Opera) seems to
            close the table for you - because it assumes you made a mistake. Then
            later, when you add additional table data cells, the browser strips it
            all out because, again, it assumes you made a mistake. You can't add
            <td></td> because there is no open table.

            Comment

            • Evertjan.

              #7
              Re: document.body.i nnderHTML

              wrote on 20 sep 2005 in comp.lang.javas cript:
              [color=blue]
              > Evertjan. wrote:[color=green]
              >> Perhaps because you have the script inside the body,
              >> and that script is lost in execution of
              >> the first line of your second example.[/color]
              >
              > Thanks for trying to help, but no, I'm not quite that stupid.
              >
              > I'm not sure if I can cut and paste html through google groups. I'm
              > not sure if this is going to show up or not.
              >
              > <html>
              > <head>
              > <script language="JavaS cript">
              >
              > function duh() {
              > // this will work:
              > document.body.i nnerHTML =
              > "<table><tr><th >one</th></tr><tr><td>two</td></tr></table>";
              >
              > // this will not work (uncomment it to see for yourself
              > /*
              > document.body.i nnerHTML = "<table><tr >";
              > document.body.i nnerHTML = document.body.i nnerHTML +
              > "<th>one</th></tr><tr><td>two</td></tr></table>";
              > */
              >}
              > </script>
              > </head>
              > <body onload="duh()">
              > </body>
              > </html>
              >[/color]

              The first one will give this correct result:

              <BODY onload=duh()>
              <TABLE>
              <TBODY>
              <TR><TH>one</TH></TR>
              <TR><TD>two</TD></TR>
              </TBODY>
              </TABLE>
              </BODY>

              =============== ======

              The second one, the corrupted one, this:

              <BODY onload=duh()>
              <TABLE>
              <TBODY>
              <TR></TR></TBODY></TABLE>
              <TH>one</TH></TR>
              <TR><TD>two</TD></TR>
              </TABLE>
              </BODY>

              =============== =======

              You see that the browser [IE in my case] adds code on its own,
              trying to make sense of the partial table set by
              document.body.i nnerHTML = "<table><tr >";

              and the added </TR></TBODY></TABLE> will corrupt your code
              after the document.body.i nnerHTML = document.body.i nnerHTML + ..

              =============== =======


              Try this as a improvement:

              t = "<table><tr >";
              t += "<th>one</th></tr><tr><td>two</td></tr></table>";

              document.body.i nnerHTML = t;

              --
              Evertjan.
              The Netherlands.
              (Replace all crosses with dots in my emailaddress)

              Comment

              • christopher.secord@gmail.com

                #8
                Re: document.body.i nnderHTML


                Evertjan. wrote:[color=blue]
                > wrote on 20 sep 2005 in comp.lang.javas cript:
                > Try this as a improvement:
                >
                > t = "<table><tr >";
                > t += "<th>one</th></tr><tr><td>two</td></tr></table>";
                >
                > document.body.i nnerHTML = t;[/color]

                Yep. That's what I ended up doing. I just wanted to understand the
                problem first. Thanks again for the help.

                Comment

                • RobG

                  #9
                  Re: document.body.i nnderHTML

                  christopher.sec ord@gmail.com wrote:[color=blue]
                  > To partially answer my own question. The answer seems to have
                  > something to do with error correcting code in the browser. If you set
                  > body.innerHTML equal to something that has a table start tag but no
                  > table end tag, the browser (I'm using IE, Firefox, and Opera) seems to
                  > close the table for you - because it assumes you made a mistake. Then
                  > later, when you add additional table data cells, the browser strips it
                  > all out because, again, it assumes you made a mistake. You can't add
                  > <td></td> because there is no open table.
                  >[/color]

                  As suggested in Microsoft's documentation on innerHTML, don't use it for
                  tables.

                  <URL:http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/innerhtml.asp>

                  You can use it to write an entire table in one go (as proposed by
                  Evertjan), but you can't use it to write bits of tables - I think you
                  can get away with it to some extent in Firefox but that is utterly
                  unreliable.

                  The reason behind the behaviour you observed is open to conjecture - you
                  may well be correct, but since there is no public standard on how
                  innerHTML is supposed to work, each browser has implemented its own
                  version resulting in some considerable variation. Some browsers might
                  ignore incomplete tags and not try to create elements from them, others
                  may attempt to correct the HTML and insert missing tags according to
                  some unpublished algorithm.

                  You are best to use innerHTML for very simple things like writing text
                  strings or simple markup. Use DOM methods for complex stuff.



                  --
                  Rob

                  Comment

                  • Zoe Brown

                    #10
                    Re: document.body.i nnderHTML


                    <christopher.se cord@gmail.com> wrote in message
                    news:1127252579 .078186.310280@ f14g2000cwb.goo glegroups.com.. .[color=blue]
                    >
                    > Zoe Brown wrote:[color=green]
                    >> you would need "document,body. .." is javascript and you are just creating
                    >> a
                    >> table and adding text to it the document,body stuff will not be
                    >> processed.[/color]
                    >
                    > I'm sorry, but I really can't parse that sentence. Can you explain a
                    > little more please?[/color]

                    sorry, had a few drinks.

                    you are writing javascript out in the body tag and this would be parsed. I
                    think others have explained this better.

                    but its like writeing

                    document.body.i nnerHTML = alert("hello");

                    it wont work cos the alert is javascript and just plonking it in the body
                    tag does not cause it to be executed.

                    Zoe


                    Comment

                    • christopher.secord@gmail.com

                      #11
                      Re: document.body.i nnderHTML

                      Zoe Brown wrote:[color=blue]
                      > you are writing javascript out in the body tag[/color]

                      No, I'm not. I don't know where you got that idea.

                      Comment

                      • christopher.secord@gmail.com

                        #12
                        Re: document.body.i nnderHTML

                        RobG wrote:[color=blue]
                        >
                        > You are best to use innerHTML for very simple things like writing text
                        > strings or simple markup. Use DOM methods for complex stuff.[/color]

                        What I'm actually doing is updating a calendar that pops up in an
                        iframe. There are "next month" and "previous month" buttons and when
                        the user clicks one of those the calendar should redraw itself with the
                        new month.

                        Now, I *could* go through each cell and change the contents with DOM
                        calls. But since this is just a very simple 7x4 table, I thought that
                        everything would look a lot cleaner if I just completely rewrote the
                        body.

                        But you're saying that's a bad idea?

                        Comment

                        • RobG

                          #13
                          Re: document.body.i nnderHTML

                          christopher.sec ord@gmail.com wrote:[color=blue]
                          > RobG wrote:
                          >[color=green]
                          >>You are best to use innerHTML for very simple things like writing text
                          >>strings or simple markup. Use DOM methods for complex stuff.[/color]
                          >
                          >
                          > What I'm actually doing is updating a calendar that pops up in an
                          > iframe. There are "next month" and "previous month" buttons and when
                          > the user clicks one of those the calendar should redraw itself with the
                          > new month.
                          >
                          > Now, I *could* go through each cell and change the contents with DOM
                          > calls. But since this is just a very simple 7x4 table, I thought that
                          > everything would look a lot cleaner if I just completely rewrote the
                          > body.
                          >
                          > But you're saying that's a bad idea?[/color]

                          My comment was in regard to using innerHTML to modify only part of a
                          table. Using innerHTML for rebuilding the entire calendar isn't so much
                          good or bad, but that there are better ways.

                          Browsers are optimised to parse and render HTML very quickly, so in
                          terms of speed, using innerHTML tends to be very fast. However, you
                          must first construct the HTML and the resources for that must also be
                          factored in.

                          I think it would be more efficient to build the table once using HTML,
                          then modify the text in the calendar cells for each change of month.
                          That could be done using innerHTML but probably more efficiently by
                          building the table once and subsequently modifying just the text nodes.

                          Consider creating an array of references to the text nodes for the date
                          cells, then just modify those. The table is built once only, as is the
                          array of references. You may also want to have different styles for
                          cells with dates, cells without and weekends.

                          You need a bigger table than 7x4 - some months may span up to 6 weeks
                          (e.g. a 31 day month starting on a Saturday). I built a calendar along
                          similar lines recently, I'll dig it out and post it if you like. It ran
                          virtually instantaneously even on very old machines.

                          The algorithm is simple - loop through the cell reference array blanking
                          cells until you get to the the day number of the first day of the month
                          (adjusting for Sunday or Monday as the first day of the week is simple).
                          Put dates starting from 1 in the following cells for each day of the
                          month until the last, then blank the remaining cells to the end. Often
                          you'll have a full row empty at the bottom - maybe you'll want to hide
                          the row in that case.

                          I can't imagine that the algorithm for creating the HTML would be
                          simpler, especially if the table also has labels for days, weeks, year,
                          month name, next/previous month/year buttons, changing styles for
                          weekends, etc.


                          --
                          Rob

                          Comment

                          • christopher.secord@gmail.com

                            #14
                            Re: document.body.i nnderHTML

                            RobG wrote:[color=blue]
                            >
                            > I can't imagine that the algorithm for creating the HTML would be
                            > simpler[/color]

                            It probably isn't. It's just very straightforward and so it was the
                            first thing that I came up with. At any rate, I'm only doing this for
                            my own personal edification. I finished the calendar portion of the
                            project I was getting paid to do. Now I'm just spending extra time on
                            it as sort of a professional development thing.

                            I like your idea of an array of pointers to the date cells. I'm going
                            to redo it that way. Thanks for the tip!

                            Comment

                            • Dr John Stockton

                              #15
                              Re: document.body.i nnderHTML

                              JRS: In article <4331729e$0$117 33$5a62ac22@per-qv1-newsreader-
                              01.iinet.net.au >, dated Thu, 22 Sep 2005 00:47:09, seen in
                              news:comp.lang. javascript, RobG <rgqld@iinet.ne t.au> posted :[color=blue]
                              >
                              >You need a bigger table than 7x4 - some months may span up to 6 weeks
                              >(e.g. a 31 day month starting on a Saturday).[/color]

                              That does depend on the definition of a week, and of which weeks belong
                              to which months. If week-of-month is defined analogously to ISO 8601
                              week-of-year, there will be either 4 or 5 weeks for each month number.

                              As alternatives to using a Table for the month, one should consider a
                              <pre> section and possibly a <textarea>; I have used a block of Buttons.

                              --
                              © John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
                              <URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
                              <URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
                              <URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

                              Comment

                              Working...