...

View Full Version : innerHTML Not Displaying



locbtran
09-18-2011, 03:42 PM
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

DaveyErwin
09-18-2011, 03:45 PM
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.

thanks

Should be more like this ....

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

minkoko
09-18-2011, 05:08 PM
the += cause the new innerHTML to be appended

can you show me how to work this += sing with some little code

devnull69
09-19-2011, 02:10 PM
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


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.

blaze4218
09-19-2011, 03:02 PM
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



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



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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum