Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    innerHTML Not Displaying

    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
    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
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by locbtran View Post
    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.

    thanks
    Should be more like this ....
    Code:
       document.getElementById('addedText').innerHTML = '<table><tr><td>';
       document.getElementById('addedText').innerHTML += "My text goes here";
       document.getElementById('addedText').innerHTML += '</tr></td></table>';
    the = sign causes the innerHTML to be replaced
    the += cause the new innerHTML to be appended
    Last edited by DaveyErwin; 09-18-2011 at 03:47 PM.

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    myeik
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 5 Posts
    PHP Code:
    the += cause the new innerHTML to be appended 
    can you show me how to work this += sing with some little code

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    But even with += this will not work correctly.

    The reason is: The browser will try to build a correct DOM tree after every(!) change of innerHTML. So if you provide incomplete HTML the browser will try to complete it and this will result in different code than expected

    Example
    Code:
    var myElement = document.getElementById('myelement');
    myElement.innerHTML = "<table><tr>";
    myElement.innerHTML += "<td>hello</td></tr>";
    myElement.innerHTML += "</table>;
    In the first line the browser will automatically add </tr> and </table> to make the code correct. The second and third line will then result in a <td> outside of the table. The browser will most probably ignore the remaining closing tags then.

  • Users who have thanked devnull69 for this post:

    blaze4218 (09-19-2011)

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    That explains it!!
    I use += to append DOM elements all the time, but recently I tried to build a table in with input from the server to upgrade an asp page to ajax, the old version looked something like

    Code:
    <table>
    <tr><td>Heading1</td><td>Heading2</td></tr>
     <%
      for(i in ContentArray){
       Response.Write('<tr><td>' + ContentArray[i][0] + '</td><td>' + ContentArray[i][1] + '</td></tr>')
       }
     %>
    </table>
    which totally worked... But when I tried to create the table by appending the DOM by the misguided += (almost exactly the same as DaveErwin's example but with a loop like above) I kept getting an "unknown runtime error" error! I never did figure out the why, I just pre-built the table in a TempString and added the whole table as one append to the DOM, which in hindsight would probably save me a lot in performance anyway...

    Code:
     function AJAX_LISTENER(){
    
       TempString = '<table><tr><td>Heading1</td><td>Heading2</td></tr>';
    
       //parse responseText and store as ContentArray[]
    
       for(i in ContentArray){
        TempString += '<tr><td>' + ContentArray[i][0] + '</td><td>' + ContentArray[i][1] + '</td></tr>';
        }
    
       TempString += '</table>';
       document.getElementById('TableContainer').innerHTML = TempString;
    
       }
    Even though I got it all worked out a couple weeks ago, I just wanted to thank devnull69 for your explanation so I can avoid the same mistake!


  •  

    Posting Permissions

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