innerHTML giving me some bother

bissatch

Hi,

I have the following simple HTML page. I am trying to get the innerHTML
of the table element, "xmltable". I do intend to change the innerHTML
of this table but at this stage I am having simple problems.

When I create the following page, note that 'onload' the loadfunction()
function is run. In this function all that is happening is that it is
chacking that the browser supports getElementById and then display an
alert with the contents of element "xmltable":

<html>
<head>
<script>

</script>
</head>
<body onload="loadfunction();">
<table width="300" id="xmltable">
<tr>
<td width="100">First Name</td>
<td width="100">Surname</td>
<td width="100">Age</td>
</tr>
</table>
</body>
</html>

The alert, however, is slightly different that what is actually
contained within "xmltable". I am getting the following:

<TBODY>
<TR>
<TD width=100>First Name</TD>
<TD width=100>Surname</TD>
<TD width=100>Age</TD>
</TR><TBODY>

Apart from the fact that the tags are in caps, what is the TBODY tags
as they are not there. How do I just get the actual string value of the
contents within "xmltable" and not the above. And more importantly, how
do I change the contents to insert a different row markup because ...

document.getElementById("xmltable").innerHTML = newHTML;

.... doesnt work.

Cheers

Burnsy

RobG

bi******@yahoo.co.uk wrote:

Hi,

I have the following simple HTML page. I am trying to get the innerHTML
of the table element, "xmltable". I do intend to change the innerHTML
of this table but at this stage I am having simple problems.

When I create the following page, note that 'onload' the loadfunction()
function is run. In this function all that is happening is that it is
chacking that the browser supports getElementById and then display an
alert with the contents of element "xmltable":

<html>
<head>
<script>
The type attribute is required:

<script type="text/javascript">

</script>
</head>
<body onload="loadfunction();">
<table width="300" id="xmltable">
<tr>
<td width="100">First Name</td>
<td width="100">Surname</td>
<td width="100">Age</td>
</tr>
</table>
</body>
</html>

The alert, however, is slightly different that what is actually
contained within "xmltable". I am getting the following:

<TBODY>
<TR>
<TD width=100>First Name</TD>
<TD width=100>Surname</TD>
<TD width=100>Age</TD>
</TR><TBODY>
I guess there are <table> tags outside the body tags.

Apart from the fact that the tags are in caps, what is the TBODY tags
as they are not there.
The tbody tags are optional, and aren't in your source HTML, however
tbody elements are mandatory in a table, so the browser inserts them.

Table elements can only contain, CAPTION, COL or COLGROUP, THEAD, TFOOT
or TBODY elements.
How do I just get the actual string value of the
contents within "xmltable" and not the above. And more importantly, how
do I change the contents to insert a different row markup because ...
By 'actual string value' I guess you want the source. The simple answer
is you can't, and more importantly you should not use innerHTML to
modify a table, use document object model (DOM) methods.

innerHTML is not an open or public standard, it is a Microsoft
proprietary method. It has been widely copied by other browsers and is
very convenient for some uses. However, MS expressly state that you
should not use it to "change the contents of the table, tFoot, tHead,
and tr elements" though you can use it to modify the contents of a td or
to write an entire table.

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

document.getElementById("xmltable").innerHTML = newHTML;

... doesnt work.
It does 'work', just not how you expected it to. There is no public
standard that defines what it should do, so whatever it does is 'working'.

Cheers

Burnsy

--
Rob

bissatch

> HTML comments inside script tags are unnecessary and potentially harmful.

Correct me if I'm wrong, but isnt this recommended or is it just old
practise where it was common for browsers to not recognise the <script>
tag?

By 'actual string value' I guess you want the source. The simple answer
is you can't, and more importantly you should not use innerHTML to
modify a table, use document object model (DOM) methods.

Ok, if I have a table with a sepcific ID, is it possible to alter the
rows (<tr><td></td></tr>)? How would this be done using DOM? Ideally if
you could provide a short example, it would be much appreciated.

Ultimately what I am trying to achieve is to dynamically ceate a table
on the 'client-side' with values taken from an XML file. Below is an
example of this file:

<?xml version="1.0" encoding="iso-8859-1"?>
<friends>
<person>
<firstname>Martin</firstname>
<surname>Bishop</surname>
<age>24</age>
</person>
<person>
<firstname>Robert</firstname>
<surname>Kennedy</surname>
<age>18</age>
</person>
<person>
<firstname>Nigel</firstname>
<surname>MacInnes</surname>
<age>23</age>
</person>
</friends>
The reason I would like to create this using JavaScript is because I
would like to be able to manipulate the table (ie. sort by column
header) without having to reload the page, where I would normally use
server-side scripting. The whole idea is to reduce page reloads. Is my
above method not capable of doing this? If so, if there a better way I
should be doing this? Ideally, I would like to use XML as it stores
values very neatly for this type of operation but if this isnt possible
I would be willing to explore other alternatives.

Cheers

Burnsy

Lasse Reichstein Nielsen

bi******@yahoo.co.uk writes:

HTML comments inside script tags are unnecessary and potentially harmful.

Correct me if I'm wrong, but isnt this recommended or is it just old
practise where it was common for browsers to not recognise the <script>
tag?

It's just old practise from when browsers didn't understand the script
tag. Netscape 2 was the first browser to introduce script tags, and
pretty much all browsers made since then (March 1996) has understood
the script tag.

The "potentially harmful" comes from what the HTML/XML comment would
do if written in an XHTML document (allow the parser to remove the
content of the script element during parsing, i.e., goodbye
script). It's not necessary, and it's a bad habit to have in the
future (or now, if you write XHTML now and send it correctly to a
browser that understands it correctly).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

bissatch

> Table elements can only contain, CAPTION, COL or COLGROUP, THEAD, TFOOT

or TBODY elements.

Is there any way to get something like this working then:
(html source)

<table width="200" id="tbl">
<tr>
<td width="100">old text</td><td width="100">new text</td>
</tr>
</table>
The by using the following statement:
document.getElementById("tbl").innerHtml = "<TBODY>\n<TR>\n<TD
width=100>Hello</TD>\n<TD width=100>Alright</TD>\n<TD
width=100>Goodbye</TD></TR></TBODY>";
....I could reset the row structure.

I have tried it, and failed, but could somethiing simply like this be
done? Im guessing that the innerHTML value isnt a simple string. Is it
possible to remake the new innerHTML string as nodes for insertion (or
am I a million miles away from how this could be done)?

Cheers

Burnsy

innerHTML giving me some bother

This discussion thread is closed

Similar topics