Missing something obvious - innerHTML

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Moriarty
Forum Newbie
Posts: 8
Joined: Tue Aug 22, 2006 9:33 am
Location: London, England. Home of Dangermouse.

Missing something obvious - innerHTML

Post by Moriarty »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I am missing something here. The following is an example with two tables and two sets of buttons. The first has a div tag inside a table cell and the second has it inside the row. 

In the first example I am using innerHTML to add data to the cell, add a new cell and add data to that. This works fine.

In the second example, I am trying to create the TD tag first and then add the same two cells - this does not work fine.

Anyone know why not?

[syntax="html"]<html>

<HEAD>

<SCRIPT>
function MyTest(){
document.all.a.innerHTML='cell1</TD><TD>cell2';
}

function MyTestErroneous(){
document.all.b.innerHTML='<TD>cell1</TD><TD>cell2</TD>';
}
</SCRIPT>

</HEAD>
<body>
<input type="button" value="go" onclick="MyTest();" />
<input type="button" value="check" onclick="alert(document.all.a.innerHTML);" />
<TABLE>
<TR><TD>
<DIV id="a" name="a"></DIV>
</TD>
</TR>
</TABLE>

<input type="button" value="go" onclick="MyTestErroneous();" />
<input type="button" value="check" onclick="alert(document.all.b.innerHTML);" />
<TABLE>
<TR>
<DIV id="b" name="b"></DIV>
</TR>
</TABLE>

</body>
</html>

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

document.getElementById() may be better to use.

personally, I wouldn't use innerHTML, but the DOM functionality to append another cell or whatever. Additionally, attempting to inject separate cells into a div will break in more standards compliant browsers.

have a search through the posts containing "createElement," "appendBefore," "appendChild," and "appendAfter"
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

this may be more likely what you are trying to do...

Code: Select all

<html> 
<HEAD> 
<SCRIPT>
window.onload = function () {
var oTbl1 = document.getElementById('tblFirst');
var oTbl2 = document.getElementById('tblSecond');
}

function MyTest() {
 oRow = oTbl1.insertRow(0);
 oCell = oRow.insertCell(0);
 oCell.innerHTML = 'Cell #1';
 oCell = oRow.insertCell(1);
 oCell.innerHTML = 'Cell #2';
}

function MyTestErroneous(){
 oRow = oTbl2.insertRow(0);
 oCell = oRow.insertCell(0);
 oCell.innerHTML = 'Cell #1';
 oCell = oRow.insertCell(1);
 oCell.innerHTML = 'Cell #2';
}
</SCRIPT>

</HEAD> 
<body> 
<input type="button" value="go" onclick="MyTest();" /> 
<input type="button" value="check" onclick="alert(document.);" /> 
<TABLE id="tblFirst">
</TABLE> 

<input type="button" value="go" onclick="MyTestErroneous();" /> 
<input type="button" value="check" onclick="alert(document.all.b.innerHTML);" /> 
<TABLE id="tblSecond"> 
</TABLE> 

</body> 
</html>
maybe you would combine those two functions into a generic function with params since they do exactly same thing.
Post Reply