I know you aren't supposed to use innerHTML to mess with table
structure, but it seems you can't use it just after a table without
damaging the containing element.
I added a table to a div using createElement methods, then added a bit
of extra text using innerHTML, only to find most of the attributes
removed from the table.
Below is a script that calls the same code to add a table inside a
div. It adds an onclick to the div and change the style. When it is
called without an extra bit of innerHTML, all is fine. But if
innerHTML is also used, the background-color is removed as is the onclick.
I know there's no spec for innerHTML, but the above behaviour happens
on IE & Firefox Windows as well as Firefox & Safari Mac.
It doesn't seem to happen if a div is used instead of a table. Is
this a known effect of innerHTML?
<script type="text/javascript">
function addDiv ( el, b ) {
var oT = document.createElement( 'table' );
var oTb = document.createElement( 'tbody' );
var oTr = document.createElement( 'tr' );
var oTd = document.createElement( 'td' );
oTd.appendChild( document.createTextNode( 'text added to table' ) );
oTd.style.backgroundColor = '#ddddff';
oTr.appendChild( oTd );
oTb.appendChild( oTr );
oT.appendChild( oTb );
oT.onclick = sayHi;
el.appendChild( oT );
if ( b ) el.innerHTML += 'Here\'s some more text';
}
function sayHi(){
alert( 'Hi from ' + this.nodeName );
}
</script>
<div onclick="addDiv( this, false );">click me 1</div>
<div onclick="addDiv( this, true );">click me 2</div>
--
Rob
