innerHTML giving me some bother

B

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>
<!--

function loadfunction() {
if (document.getElementById) {
alert(document.getElementById("xmltable").innerHTML);
}
}

-->
</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
 
R

RobG

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>
Click to expand...

The type attribute is required:

<!--
Click to expand...

HTML comments inside script tags are unnecessary and potentially harmful.
function loadfunction() {
if (document.getElementById) {
alert(document.getElementById("xmltable").innerHTML);
}
}

-->
</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>
Click to expand...

I guess there are said:
Apart from the fact that the tags are in caps, what is the TBODY tags
as they are not there.
Click to expand...

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 ...
Click to expand...

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.

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

... doesnt work.
Click to expand...

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'.
 
B

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
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.
Click to expand...

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
 
L

Lasse Reichstein Nielsen

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?
Click to expand...

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
 
B

bissatch

Table elements can only contain, CAPTION, COL or COLGROUP, THEAD, TFOOT
or TBODY elements.
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to wrap <td> content . 16
Javascript DOM 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Script to send email not working 1
Filter table rows based on multiple checkboxes value 2
Function call from button to automatic 7
Help needed with thank you message 5

Members online

No members online now.
Total: 59 (members: 1, guests: 58)
Robots: 176

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,144
Latest member
KetoBaseReviews

Latest Threads

Top