inner HTML adding <tbody></tbody></table>

Discussion in 'JavaScript' started by marty, Mar 7, 2006.

0
  1. #1
    I've noticed that when I add the HTML "<table>" to the innerHTML of a div, IE adds <tbody></tbody></table> automatically, for an example try (note - in the pop up has "<tbody></tbody></table>" that wasn't added):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head><title>Untitled</title></head>
    <body>
    <div id="wwww"></div>
    <script language="JavaScript" type="text/javascript">
    document.getElementById("wwww").innerHTML = "<table>"
    document.getElementById("wwww").innerHTML = document.getElementById("wwww").innerHTML + "<tr><td>blah</td></tr>"
    document.getElementById("wwww").innerHTML = document.getElementById("wwww").innerHTML + "</table>"
    alert(document.getElementById("wwww").innerHTML)
    </script>
    </body>
    </html>
     
    marty, Mar 7, 2006 IP
  2. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #2
    I haven't tried your code yet, but just looking at it I can see that you can simplify greatly to this:

    document.getElementById("wwww").innerHTML = "<table>"
    + "<tr><td>blah</td></tr>"
    + "</table>";
     
    frankcow, Mar 7, 2006 IP
  3. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey frankcow,

    That's cool, usually I need to do something like:
    document.getElementById("wwww").innerHTML = "<table>"
    --start loop
    document.getElementById("wwww").innerHTML = "<tr><td>blah</td></tr>"
    --end loop
    document.getElementById("wwww").innerHTML = "</table>"

    the problem is that when I break it up into three pieces IE ends the table before I can start adding the rows.
     
    marty, Mar 7, 2006 IP
  4. Jowan Pasco

    Jowan Pasco Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I've had that with IE, it seems happier when you create tables through createElement() and friends instead of using innerHTML.
     
    Jowan Pasco, Mar 7, 2006 IP
  5. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #5
    don't forget you can use the += operator, instead of var = var + '';
     
    frankcow, Mar 7, 2006 IP
  6. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hey Jowan,

    Would you mind posting a snippet of code show the insertions of a simple table and one row with a data cell using the createElement() method? I'd love to see a quick example of that.

    Marty
     
    marty, Mar 7, 2006 IP
  7. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #7
    frankcow,

    Yeah, I really should get in the habbit of doing it that way. Thanks for the reminder.

    Marty
     
    marty, Mar 7, 2006 IP
  8. Jowan Pasco

    Jowan Pasco Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Unfortunately, I ended up not using that code so I no longer have it. But it comes around to this:

    http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/table.asp is a reference to IE's table object. It has a rows collection:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/rows.asp

    You can either manipulate the rows collection, or use methods like insertRow:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertrow.asp

    I don't remember which one has worked for me, but I did have lots of problems with building tables in IE using innerHTML. It just wouldn't work.

    I'd suggest starting with insertRow and similar methods, they are specifically for tables and have a better chance of working.

    This is all strictly IE specific, of course.
     
    Jowan Pasco, Mar 8, 2006 IP
  9. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks for the info Jowan... Just in case you're curious I've had a lot of luck with the innerHTML, but only if I write all of the HTML to a variable and then assign that variable to the innerHTML.

    For example:

    
var myInnerHTML = "<table>"
--start loop
myInnerHTML += "<tr><td>blah</td></tr>"
--end loop
myInnerHTML += "</table>"

document.getElementById("wwww").innerHTML = myInnerHTML
    Code (markup):
    Thanks again...
     
    marty, Mar 8, 2006 IP
  10. torunforever

    torunforever Peon

    Messages:
    414
    Likes Received:
    36
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Not true. insertRow is defined in the W3C DOM and is supported in other browsers. For example, here is the mozilla.org reference page for insertRow.

    The microsoft pages you listed have examples that are IE specific, but only because they use document.all.
     
    torunforever, Mar 8, 2006 IP
  11. Jowan Pasco

    Jowan Pasco Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You're right, good catch. I must've used different methods or it just stuck with me that I only had to do this for IE.
     
    Jowan Pasco, Mar 10, 2006 IP