/    Sign up×
Community /Pin to ProfileBookmark

innerHTML Not Displaying

Copy linkTweet thisAlerts:
Sep 18.2011

innerHTML [B]Not[/B] 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>’;[/CODE]

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>’;[/CODE]

Here’s my code

[code=html]<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>[/code]

thanks

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERSep 18.2011 — Change following:
<i>
</i>function display() {
document.getElementById('addedText').innerHTML = '&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt;';
document.getElementById('addedText').innerHTML += "My text goes here";
document.getElementById('addedText').innerHTML += '&lt;/tr&gt;&lt;/td&gt;&lt;/table&gt;';
}
Copy linkTweet thisAlerts:
@rtretheweySep 18.2011 — The reason that the 3-line version of your code fails is that each line resets the value of .innerHTML to something new. The last line to be executed sets it to "</tr></td></table>" which would be invisible. You need to change your code to use the += operator:
<i>
</i>&lt;script type="text/javascript"&gt;
function display() {
document.getElementById('addedText').innerHTML = '&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt;';
document.getElementById('addedText').innerHTML += "My text goes here";
document.getElementById('addedText').innerHTML += '&lt;/tr&gt;&lt;/td&gt;&lt;/table&gt;';
}
&lt;/script&gt;

or gather the pieces in a separate variable and then use that variable to set the .innerHTML, as in:
<i>
</i>&lt;script type="text/javascript"&gt;
function display() {
var newText = '&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt;';
newText += 'My text goes here';
newText += '&lt;/tr&gt;&lt;/td&gt;&lt;/table&gt;';
document.getElementById('addedText').innerHTML = newText;
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@007JulienSep 18.2011 — You have, at first, to insert a + sign to add effectively text. But, browsers are now far too intelligent : they close your tags before your second insert !

document.getElementById('addedText').innerHTML = '<table border=1><tr><td>';

alert(getElementById('addedText').innerHTML);

document.getElementById('addedText').innerHTML+ = "My text goes here";

alert(getElementById('addedText').innerHTML);

document.getElementById('addedText').innerHTML + = '</tr></td></table>';

alert(getElementById('addedText').innerHTML);

See the table object and his collections to work with.
×

Success!

Help @locbtran spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...