SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confused with innerHTML

    I can't seem to get my innerHTML to display my content.

    This works fine, if I was to put it all in one line.
    Code:
    document.getElementById('addedText').innerHTML =  '<table><tr><td>'+"My text goes here"+'</tr></td></table>';
    If I was to break it up, which I wanted then nothing seem to show up.
    Code:
       document.getElementById('addedText').innerHTML = '<table><tr><td>';
       document.getElementById('addedText').innerHTML = "My text goes here";
       document.getElementById('addedText').innerHTML = '</tr></td></table>';

    Here's my code
    HTML Code:
    <html>
    <head>
    <script type="text/javascript"> 
    function display() {
       document.getElementById('addedText').innerHTML = '<table border=1><tr><td>';
       document.getElementById('addedText').innerHTML = "My text goes here";
       document.getElementById('addedText').innerHTML = '</tr></td></table>';
    }
    </script>
    </head>
    
    <body onload="display()">
    <div id="addedText"></div>
    </body>
    </html>
    thanks

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    document.getElementById('addedText').innerHTML = '<table><tr><td>';
    document.getElementById('addedText').innerHTML+= "My text goes here";
    document.getElementById('addedText').innerHTML+= '</tr></td></table>';
    The only code I hate more than my own is everyone else's.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    oddz has it right, but to explain it:

    InnerHTML with "=" REPLACES the content... as such the code you had would only have contained the very last line -- </tr></td></table> -- by the time the script is done running... because first you replace it's content with the first line, replace it again erasing that first line with the second one, then erase and replace again with the third one.

    The switch to += in oddz example means only the first one replaces the content, the latter two add to the end of it.

    Though 'officially' you're not supposed to use innerHTML and instead be building with the DOM... Oh, and I hope that snippet isn't actual code, since if it only has one TD why use a table?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    innerHTML cannot replace part of a table in Internet Explorer - if you are going to replace any of the table tags you must replace the entire table.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementById('addedText').innerHTML = '<table><tr><td>';
    document.getElementById('addedText').innerHTML+= "My text goes here";
    document.getElementById('addedText').innerHTML+= '</tr></td></table>';

    ===Equals

    <table>
    <tr>
    <td>
    My text goes here
    </tr>
    </td>
    </table>

    =====Shouldn't it be:

    document.getElementById('addedText').innerHTML = '<table><tr><td>';
    document.getElementById('addedText').innerHTML+= "My text goes here";
    document.getElementById('addedText').innerHTML+= '</td></tr></table>';

    =which gives you:

    <table>
    <tr>
    <td>
    My text goes here
    </td>
    </tr>
    </table>

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Good catch Ulricht, the </tr> and </td> were indeed reversed.

    Also, it's usually a bad idea to call getElementById over and over as that's one of the slower functions... when possible, make it one statement; OR put the result in a var and manipulate the result.

    $target=document.getElementById('addedText');
    $target.innerHTML = '<table><tr><td>';
    $target.innerHTML+= 'My text goes here';
    $target.innerHTML+= '</td></tr></table>';

    Will run much faster.

    $target=document.getElementById('addedText');
    $target.innerHTML = '<table><tr><td>My text goes here</td></tr></table>';

    Is even faster to execute... and do yourself a favor, stick with single quotes. Double quotes take longer to parse in .js -- it's also easier since you are less likely to be outputting singles, while HTML tags use doubles all the time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •