Confused with innerHTML

JavaScript
1

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.

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.

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

document.getElementById(‘addedText’).innerHTML = ‘<table><tr><td>’;
document.getElementById(‘addedText’).innerHTML+= “My text goes here”;
document.getElementById(‘addedText’).innerHTML+= ‘</tr></td></table>’;

3

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? :smiley:

4

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.

5

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

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.