Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE gives error when writing innerHTML property

Status
Not open for further replies.
jtaal

jtaal

Technical User
Jan 17, 2004
23
NL
view the following simple script:
Code: 
<body>
<table border=1>
  <tr id='row'>
  </tr>
</table>
<script language=&quot;JavaScript&quot;>
<!--
document.getElementById('row').innerHTML = '<td>hello world</td>';
//-->
</script>
</body>
This should display 'hello world' with a border around it.
Mozilla does this neatly, but IE (6.0) gives an error:
'Unknown runtime error' on line 8
I tried putting a '<td></td>' pair into the HTML text, but that doesn't work, however the following script seems to work just fine:
Code: 
<body>
<table border=1>
  <tr><td id='data'></td>
  </tr>
</table>
<script language=&quot;JavaScript&quot;>
<!--
document.getElementById('data').innerHTML = 'asdf';
//-->
</script>
</body>

It's not an option to place an additional table inside a '<td></td>' because i set widths somewhere else...

please help
 
Sort by date Sort by votes
I sat down to write a test harness... and came across the same problems you were having *grin*. Everything worked fine in other browsers... just not in IE (Mac or PC). This is what I got to work in the end (using classes instead to allow multiple rows to change):

Code: 
<html>
<head></head>
<body>
<table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;2&quot;>
<tr class=&quot;changeme&quot;><td></td></tr>
<tr><td>No no no</td></tr>
<tr class=&quot;changeme&quot;><td></td></tr>
<tr><td>No no no</td></tr>
<tr><td>No no no</td></tr>
<tr><td>No no no</td></tr>
<tr class=&quot;changeme&quot;><td></td></tr>
</table>
<script type=&quot;text/javascript&quot;>
  var myElements = document.getElementsByTagName(&quot;tr&quot;);
  for (var loop=0; loop < myElements.length; loop++)
  {
    if (myElements[loop].className == &quot;changeme&quot;)
    {
      myElements[loop].getElementsByTagName(&quot;td&quot;)[0].innerHTML = &quot;hello world&quot;
//myElements[loop].getElementsByTagName(&quot;td&quot;)[1].innerHTML = &quot;hello world cell 2&quot;
    }
  }
</script>
</body>
</html>

The conclusion I'm at right now... you can't set the innerHTML of a <tr> if it has no <td>.

The script I used supposed just one column. If you added more then you would have to manage them as well (see the commented out code).

I know you are trying to set a &quot;border&quot; around a title... that's fine... I was exploring the deeper possibilities :)

Hope this is a start (and validation that &quot;you got it right - it should work fine&quot;)!

Jeff





Then use something like:

Code: 
<script type=&quot;text/javascript&quot;>
var myElements = document.getElementsByTagName(&quot;tr&quot;);
for (var loop=0; loop < myElements.length; loop++)
{
  if (myElements[loop].className == &quot;changeme&quot;)
    myElements[loop].innerHTML = &quot;<td>hello world</td>&quot;;
}
</script>
 
Upvote 0 Downvote
I knew i was right, this means i have to rearrange my whole structure :(
My tables don't know how much cols there are gonna be, and if i don't know that i can't create the td's before i fill them. The major downside to this is that i'll want a colspan somewhere along some tr, and that's not possible anymore i guess. An other solution is to rewrite the whole table's innerHTML, that works fine...
 
Upvote 0 Downvote

Why not use createElement to create your TDs instead of writing the HTML out... I suspect that might work.

Dan
 
Upvote 0 Downvote
Is that function crossbrowser/platform indepentent???
 
Upvote 0 Downvote

Here you go...

Try this... It dynamically creates the 3 TDs:

Code: 
<html>
<head>
<script type=&quot;text/javascript&quot;>
<!--
	function populateRows()
	{
		var myRow = document.getElementById('row1');
		var myNewCell = document.createElement('td');
		myRow.appendChild(myNewCell);
		myNewCell.innerHTML = 'This is row 1, cell 1';

		var myRow = document.getElementById('row2');
		var myNewCell = document.createElement('td');
		myRow.appendChild(myNewCell);
		myNewCell.innerHTML = 'This is row 2, cell 1';

		var myRow = document.getElementById('row3');
		var myNewCell = document.createElement('td');
		myRow.appendChild(myNewCell);
		myNewCell.innerHTML = 'This is row 3, cell 1';
	}

//-->
</script>
</head>
<body onload=&quot;populateRows();&quot;>
	<table border=1>
		<tr id=&quot;row1&quot;></tr>
		<tr id=&quot;row2&quot;></tr>
		<tr id=&quot;row3&quot;></tr>
	</table>
</body>
</html>

Hope this helps,

Dan
 
Upvote 0 Downvote
This is actually precisely what i was looking for!!!
Tnhx alot
 
Upvote 0 Downvote
Just a follow-up, I'm pretty sure I read on Microsoft's site that you can't set the innerHTML property as the page is loading. You'd have to use the onload event or document.write() or like what Dan wrote.

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
1K
MDGarcia
MDGarcia
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
189
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
215
JPSeo
JPSeo
codylegge
  • Locked
  • Question
Javascript Conflicting error on wordpress website
Replies
1
Views
187
MarkSweetland
MarkSweetland
dannyo12
  • Locked
  • Question
Async library error in terminal while running Ethereum Smart Contracts test with mocha?
Replies
0
Views
114
dannyo12
dannyo12

Part and Inventory Search

Sponsor

Back
Top