document.body.innderHTML

**Evertjan.** · Sep 20 '05, 09:15 PM

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)

**Zoe Brown** · Sep 20 '05, 09:15 PM

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.

**christopher.secord@gmail.com** · Sep 20 '05, 09:55 PM

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>

**christopher.secord@gmail.com** · Sep 20 '05, 09:55 PM

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?

**christopher.secord@gmail.com** · Sep 20 '05, 09:55 PM

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.

**Evertjan.** · Sep 20 '05, 10:15 PM

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)

**christopher.secord@gmail.com** · Sep 20 '05, 10:45 PM

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.

**RobG** · Sep 20 '05, 11:25 PM

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

**Zoe Brown** · Sep 21 '05, 09:45 AM

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

**christopher.secord@gmail.com** · Sep 21 '05, 12:55 PM

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.

**christopher.secord@gmail.com** · Sep 21 '05, 12:55 PM

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?

**RobG** · Sep 21 '05, 02:55 PM

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

**christopher.secord@gmail.com** · Sep 21 '05, 03:25 PM

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!

**Dr John Stockton** · Sep 22 '05, 06:45 PM

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.

document.body.innderHTML

document.body.innderHTML

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment